@kontakto/email-template-editor 1.3.3 → 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 +1561 -420
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +760 -10
- package/dist/index.d.ts +760 -10
- package/dist/index.js +1477 -341
- 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,21 +1258,159 @@ 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
|
}
|
|
1280
|
+
|
|
1281
|
+
// src/email-builder/renderers/render-to-text.ts
|
|
1282
|
+
function renderToText(document2, { rootBlockId }) {
|
|
1283
|
+
const lines = [];
|
|
1284
|
+
renderBlock(document2, rootBlockId, lines);
|
|
1285
|
+
return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
|
|
1286
|
+
}
|
|
1287
|
+
function renderBlock(document2, blockId, lines) {
|
|
1288
|
+
var _a;
|
|
1289
|
+
const block = document2[blockId];
|
|
1290
|
+
if (!block) return;
|
|
1291
|
+
const { type, data } = block;
|
|
1292
|
+
switch (type) {
|
|
1293
|
+
case "EmailLayout":
|
|
1294
|
+
renderChildren(document2, data == null ? void 0 : data.childrenIds, lines);
|
|
1295
|
+
break;
|
|
1296
|
+
case "Container":
|
|
1297
|
+
renderChildren(document2, (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.childrenIds, lines);
|
|
1298
|
+
break;
|
|
1299
|
+
case "ColumnsContainer":
|
|
1300
|
+
renderColumnsContainer(document2, data, lines);
|
|
1301
|
+
break;
|
|
1302
|
+
case "Text":
|
|
1303
|
+
renderText(data, lines);
|
|
1304
|
+
break;
|
|
1305
|
+
case "Heading":
|
|
1306
|
+
renderHeading(data, lines);
|
|
1307
|
+
break;
|
|
1308
|
+
case "Button":
|
|
1309
|
+
renderButton(data, lines);
|
|
1310
|
+
break;
|
|
1311
|
+
case "Image":
|
|
1312
|
+
renderImage(data, lines);
|
|
1313
|
+
break;
|
|
1314
|
+
case "Avatar":
|
|
1315
|
+
renderAvatar(data, lines);
|
|
1316
|
+
break;
|
|
1317
|
+
case "Html":
|
|
1318
|
+
renderHtml(data, lines);
|
|
1319
|
+
break;
|
|
1320
|
+
case "Divider":
|
|
1321
|
+
lines.push("");
|
|
1322
|
+
lines.push("---");
|
|
1323
|
+
lines.push("");
|
|
1324
|
+
break;
|
|
1325
|
+
case "Spacer":
|
|
1326
|
+
lines.push("");
|
|
1327
|
+
break;
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1330
|
+
function renderChildren(document2, childrenIds, lines) {
|
|
1331
|
+
if (!childrenIds) return;
|
|
1332
|
+
for (const childId of childrenIds) {
|
|
1333
|
+
renderBlock(document2, childId, lines);
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
function renderColumnsContainer(document2, data, lines) {
|
|
1337
|
+
var _a, _b;
|
|
1338
|
+
const columns = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.columns;
|
|
1339
|
+
if (!columns) return;
|
|
1340
|
+
for (const col of columns) {
|
|
1341
|
+
if ((_b = col == null ? void 0 : col.childrenIds) == null ? void 0 : _b.length) {
|
|
1342
|
+
renderChildren(document2, col.childrenIds, lines);
|
|
1343
|
+
}
|
|
1344
|
+
}
|
|
1345
|
+
}
|
|
1346
|
+
function renderText(data, lines) {
|
|
1347
|
+
var _a, _b, _c;
|
|
1348
|
+
const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
|
|
1349
|
+
if (!text) return;
|
|
1350
|
+
if ((_c = data == null ? void 0 : data.props) == null ? void 0 : _c.markdown) {
|
|
1351
|
+
lines.push(text);
|
|
1352
|
+
} else {
|
|
1353
|
+
lines.push(text);
|
|
1354
|
+
}
|
|
1355
|
+
lines.push("");
|
|
1356
|
+
}
|
|
1357
|
+
function renderHeading(data, lines) {
|
|
1358
|
+
var _a, _b, _c, _d;
|
|
1359
|
+
const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
|
|
1360
|
+
if (!text) return;
|
|
1361
|
+
const level = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.level) != null ? _d : "h2";
|
|
1362
|
+
const prefix = level === "h1" ? "# " : level === "h2" ? "## " : "### ";
|
|
1363
|
+
lines.push(prefix + text);
|
|
1364
|
+
lines.push("");
|
|
1365
|
+
}
|
|
1366
|
+
function renderButton(data, lines) {
|
|
1367
|
+
var _a, _b, _c, _d;
|
|
1368
|
+
const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
|
|
1369
|
+
const url = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.url) != null ? _d : "";
|
|
1370
|
+
if (text && url) {
|
|
1371
|
+
lines.push(`${text}: ${url}`);
|
|
1372
|
+
} else if (text) {
|
|
1373
|
+
lines.push(text);
|
|
1374
|
+
} else if (url) {
|
|
1375
|
+
lines.push(url);
|
|
1376
|
+
}
|
|
1377
|
+
lines.push("");
|
|
1378
|
+
}
|
|
1379
|
+
function renderImage(data, lines) {
|
|
1380
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1381
|
+
const alt = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.alt) != null ? _b : "";
|
|
1382
|
+
const url = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.url) != null ? _d : "";
|
|
1383
|
+
const linkHref = (_f = (_e = data == null ? void 0 : data.props) == null ? void 0 : _e.linkHref) != null ? _f : "";
|
|
1384
|
+
if (alt && linkHref) {
|
|
1385
|
+
lines.push(`[${alt}] ${linkHref}`);
|
|
1386
|
+
} else if (alt) {
|
|
1387
|
+
lines.push(`[${alt}]`);
|
|
1388
|
+
} else if (url) {
|
|
1389
|
+
lines.push(`[Image: ${url}]`);
|
|
1390
|
+
}
|
|
1391
|
+
lines.push("");
|
|
1392
|
+
}
|
|
1393
|
+
function renderAvatar(data, lines) {
|
|
1394
|
+
var _a, _b;
|
|
1395
|
+
const alt = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.alt) != null ? _b : "";
|
|
1396
|
+
if (alt) {
|
|
1397
|
+
lines.push(`[${alt}]`);
|
|
1398
|
+
lines.push("");
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1401
|
+
function renderHtml(data, lines) {
|
|
1402
|
+
var _a, _b;
|
|
1403
|
+
const contents = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.contents) != null ? _b : "";
|
|
1404
|
+
if (!contents) return;
|
|
1405
|
+
const text = stripHtml(contents);
|
|
1406
|
+
if (text) {
|
|
1407
|
+
lines.push(text);
|
|
1408
|
+
lines.push("");
|
|
1409
|
+
}
|
|
1410
|
+
}
|
|
1411
|
+
function stripHtml(html2) {
|
|
1412
|
+
return html2.replace(/<br\s*\/?>/gi, "\n").replace(/<\/(p|div|h[1-6]|li|tr|blockquote)>/gi, "\n").replace(/<hr\s*\/?>/gi, "\n---\n").replace(/<[^>]+>/g, "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"').replace(/'/g, "'").replace(/ /g, " ").split("\n").map((line) => line.trim()).join("\n").replace(/\n{3,}/g, "\n\n").trim();
|
|
1413
|
+
}
|
|
1100
1414
|
var BRAND_NAVY = "#212443";
|
|
1101
1415
|
var BRAND_BLUE = "#0079CC";
|
|
1102
1416
|
var BRAND_GREEN = "#1F8466";
|
|
@@ -1701,19 +2015,19 @@ function setSelectedScreenSize(selectedScreenSize) {
|
|
|
1701
2015
|
function setPersistenceEnabled(persistenceEnabled) {
|
|
1702
2016
|
return editorStateStore.setState({ persistenceEnabled });
|
|
1703
2017
|
}
|
|
1704
|
-
var EmailEditorContext =
|
|
2018
|
+
var EmailEditorContext = React72.createContext(null);
|
|
1705
2019
|
var EmailEditorProvider = ({
|
|
1706
2020
|
children,
|
|
1707
2021
|
initialTemplateId = null,
|
|
1708
2022
|
initialTemplateName = null,
|
|
1709
2023
|
onSave
|
|
1710
2024
|
}) => {
|
|
1711
|
-
const [currentTemplateId, setCurrentTemplateId] =
|
|
1712
|
-
const [currentTemplateName, setCurrentTemplateName] =
|
|
1713
|
-
const saveListenersRef =
|
|
1714
|
-
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);
|
|
1715
2029
|
onSaveRef.current = onSave;
|
|
1716
|
-
const saveTemplate =
|
|
2030
|
+
const saveTemplate = React72.useCallback(() => {
|
|
1717
2031
|
const currentDoc = getDocument();
|
|
1718
2032
|
saveListenersRef.current.forEach((listener) => listener(currentDoc));
|
|
1719
2033
|
if (onSaveRef.current) {
|
|
@@ -1721,7 +2035,7 @@ var EmailEditorProvider = ({
|
|
|
1721
2035
|
}
|
|
1722
2036
|
return currentDoc;
|
|
1723
2037
|
}, []);
|
|
1724
|
-
const loadTemplate =
|
|
2038
|
+
const loadTemplate = React72.useCallback((newTemplate, templateId, templateName) => {
|
|
1725
2039
|
if (templateId !== void 0) {
|
|
1726
2040
|
setCurrentTemplateId(templateId);
|
|
1727
2041
|
}
|
|
@@ -1729,17 +2043,17 @@ var EmailEditorProvider = ({
|
|
|
1729
2043
|
setCurrentTemplateName(templateName);
|
|
1730
2044
|
}
|
|
1731
2045
|
}, []);
|
|
1732
|
-
const setCurrentTemplate =
|
|
2046
|
+
const setCurrentTemplate = React72.useCallback((templateId, templateName) => {
|
|
1733
2047
|
setCurrentTemplateId(templateId);
|
|
1734
2048
|
setCurrentTemplateName(templateName);
|
|
1735
2049
|
}, []);
|
|
1736
|
-
const registerSaveListener =
|
|
2050
|
+
const registerSaveListener = React72.useCallback((callback) => {
|
|
1737
2051
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
1738
2052
|
return () => {
|
|
1739
2053
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
1740
2054
|
};
|
|
1741
2055
|
}, []);
|
|
1742
|
-
const value =
|
|
2056
|
+
const value = React72.useMemo(() => ({
|
|
1743
2057
|
currentTemplateId,
|
|
1744
2058
|
currentTemplateName,
|
|
1745
2059
|
saveTemplate,
|
|
@@ -1747,24 +2061,24 @@ var EmailEditorProvider = ({
|
|
|
1747
2061
|
registerSaveListener,
|
|
1748
2062
|
setCurrentTemplate
|
|
1749
2063
|
}), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
|
|
1750
|
-
return /* @__PURE__ */
|
|
2064
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailEditorContext.Provider, { value }, children);
|
|
1751
2065
|
};
|
|
1752
2066
|
var useEmailEditor = () => {
|
|
1753
|
-
const context =
|
|
2067
|
+
const context = React72.useContext(EmailEditorContext);
|
|
1754
2068
|
if (!context) {
|
|
1755
2069
|
throw new Error("useEmailEditor must be used within an EmailEditorProvider");
|
|
1756
2070
|
}
|
|
1757
2071
|
return context;
|
|
1758
2072
|
};
|
|
1759
2073
|
function BaseSidebarPanel({ title, children }) {
|
|
1760
|
-
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));
|
|
1761
2075
|
}
|
|
1762
2076
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
1763
|
-
const [value, setValue] =
|
|
1764
|
-
|
|
2077
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2078
|
+
React72.useEffect(() => {
|
|
1765
2079
|
setValue(defaultValue);
|
|
1766
2080
|
}, [defaultValue]);
|
|
1767
|
-
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(
|
|
1768
2082
|
material.ToggleButtonGroup,
|
|
1769
2083
|
{
|
|
1770
2084
|
exclusive: true,
|
|
@@ -1784,7 +2098,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
1784
2098
|
}
|
|
1785
2099
|
function RawSliderInput(_a) {
|
|
1786
2100
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
1787
|
-
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(
|
|
1788
2102
|
material.Slider,
|
|
1789
2103
|
__spreadProps(__spreadValues({}, props), {
|
|
1790
2104
|
value,
|
|
@@ -1795,14 +2109,14 @@ function RawSliderInput(_a) {
|
|
|
1795
2109
|
setValue(value2);
|
|
1796
2110
|
}
|
|
1797
2111
|
})
|
|
1798
|
-
), /* @__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)));
|
|
1799
2113
|
}
|
|
1800
2114
|
|
|
1801
2115
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
1802
2116
|
function SliderInput(_a) {
|
|
1803
2117
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
1804
|
-
const [value, setValue] =
|
|
1805
|
-
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(
|
|
1806
2120
|
RawSliderInput,
|
|
1807
2121
|
__spreadValues({
|
|
1808
2122
|
value,
|
|
@@ -1814,12 +2128,12 @@ function SliderInput(_a) {
|
|
|
1814
2128
|
));
|
|
1815
2129
|
}
|
|
1816
2130
|
function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
|
|
1817
|
-
const [value, setValue] =
|
|
2131
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
1818
2132
|
const isMultiline = typeof rows === "number" && rows > 1;
|
|
1819
|
-
|
|
2133
|
+
React72.useEffect(() => {
|
|
1820
2134
|
setValue(defaultValue);
|
|
1821
2135
|
}, [defaultValue]);
|
|
1822
|
-
return /* @__PURE__ */
|
|
2136
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
1823
2137
|
material.TextField,
|
|
1824
2138
|
{
|
|
1825
2139
|
fullWidth: true,
|
|
@@ -1844,8 +2158,8 @@ var TILE_BUTTON = {
|
|
|
1844
2158
|
height: 24
|
|
1845
2159
|
};
|
|
1846
2160
|
function Swatch({ paletteColors, value, onChange }) {
|
|
1847
|
-
const
|
|
1848
|
-
return /* @__PURE__ */
|
|
2161
|
+
const renderButton2 = (colorValue) => {
|
|
2162
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
1849
2163
|
material.Button,
|
|
1850
2164
|
{
|
|
1851
2165
|
key: colorValue,
|
|
@@ -1864,7 +2178,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
1864
2178
|
}
|
|
1865
2179
|
);
|
|
1866
2180
|
};
|
|
1867
|
-
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)));
|
|
1868
2182
|
}
|
|
1869
2183
|
|
|
1870
2184
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -1931,7 +2245,7 @@ var SX = {
|
|
|
1931
2245
|
}
|
|
1932
2246
|
};
|
|
1933
2247
|
function Picker({ value, onChange }) {
|
|
1934
|
-
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 })));
|
|
1935
2249
|
}
|
|
1936
2250
|
|
|
1937
2251
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -1944,8 +2258,8 @@ var BUTTON_SX = {
|
|
|
1944
2258
|
bgcolor: "#FFFFFF"
|
|
1945
2259
|
};
|
|
1946
2260
|
function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
1947
|
-
const [anchorEl, setAnchorEl] =
|
|
1948
|
-
const [value, setValue] =
|
|
2261
|
+
const [anchorEl, setAnchorEl] = React72.useState(null);
|
|
2262
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
1949
2263
|
const handleClickOpen = (event) => {
|
|
1950
2264
|
setAnchorEl(event.currentTarget);
|
|
1951
2265
|
};
|
|
@@ -1956,7 +2270,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1956
2270
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
1957
2271
|
return null;
|
|
1958
2272
|
}
|
|
1959
|
-
return /* @__PURE__ */
|
|
2273
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
1960
2274
|
material.ButtonBase,
|
|
1961
2275
|
{
|
|
1962
2276
|
onClick: () => {
|
|
@@ -1964,16 +2278,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1964
2278
|
onChange(null);
|
|
1965
2279
|
}
|
|
1966
2280
|
},
|
|
1967
|
-
/* @__PURE__ */
|
|
2281
|
+
/* @__PURE__ */ React72__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
1968
2282
|
);
|
|
1969
2283
|
};
|
|
1970
2284
|
const renderOpenButton = () => {
|
|
1971
2285
|
if (value) {
|
|
1972
|
-
return /* @__PURE__ */
|
|
2286
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
1973
2287
|
}
|
|
1974
|
-
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" }));
|
|
1975
2289
|
};
|
|
1976
|
-
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(
|
|
1977
2291
|
material.Menu,
|
|
1978
2292
|
{
|
|
1979
2293
|
anchorEl,
|
|
@@ -1983,7 +2297,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1983
2297
|
sx: { height: "auto", padding: 0 }
|
|
1984
2298
|
}
|
|
1985
2299
|
},
|
|
1986
|
-
/* @__PURE__ */
|
|
2300
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
1987
2301
|
Picker,
|
|
1988
2302
|
{
|
|
1989
2303
|
value: value || "",
|
|
@@ -1998,10 +2312,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1998
2312
|
|
|
1999
2313
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2000
2314
|
function ColorInput2(props) {
|
|
2001
|
-
return /* @__PURE__ */
|
|
2315
|
+
return /* @__PURE__ */ React72__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2002
2316
|
}
|
|
2003
2317
|
function NullableColorInput(props) {
|
|
2004
|
-
return /* @__PURE__ */
|
|
2318
|
+
return /* @__PURE__ */ React72__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2005
2319
|
}
|
|
2006
2320
|
|
|
2007
2321
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2054,13 +2368,13 @@ var FONT_FAMILIES = [
|
|
|
2054
2368
|
];
|
|
2055
2369
|
|
|
2056
2370
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2057
|
-
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));
|
|
2058
2372
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2059
|
-
const [value, setValue] =
|
|
2060
|
-
|
|
2373
|
+
const [value, setValue] = React72.useState(defaultValue != null ? defaultValue : "inherit");
|
|
2374
|
+
React72.useEffect(() => {
|
|
2061
2375
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2062
2376
|
}, [defaultValue]);
|
|
2063
|
-
return /* @__PURE__ */
|
|
2377
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2064
2378
|
material.TextField,
|
|
2065
2379
|
{
|
|
2066
2380
|
select: true,
|
|
@@ -2073,23 +2387,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2073
2387
|
onChange(v === null ? null : v);
|
|
2074
2388
|
}
|
|
2075
2389
|
},
|
|
2076
|
-
/* @__PURE__ */
|
|
2390
|
+
/* @__PURE__ */ React72__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2077
2391
|
OPTIONS
|
|
2078
2392
|
);
|
|
2079
2393
|
}
|
|
2080
2394
|
function FontSizeInput({ label, defaultValue, onChange }) {
|
|
2081
|
-
const [value, setValue] =
|
|
2082
|
-
|
|
2395
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2396
|
+
React72.useEffect(() => {
|
|
2083
2397
|
setValue(defaultValue);
|
|
2084
2398
|
}, [defaultValue]);
|
|
2085
2399
|
const handleChange = (value2) => {
|
|
2086
2400
|
setValue(value2);
|
|
2087
2401
|
onChange(value2);
|
|
2088
2402
|
};
|
|
2089
|
-
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(
|
|
2090
2404
|
RawSliderInput,
|
|
2091
2405
|
{
|
|
2092
|
-
iconLabel: /* @__PURE__ */
|
|
2406
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2093
2407
|
value,
|
|
2094
2408
|
setValue: handleChange,
|
|
2095
2409
|
units: "px",
|
|
@@ -2100,11 +2414,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2100
2414
|
));
|
|
2101
2415
|
}
|
|
2102
2416
|
function FontWeightInput({ label, defaultValue, onChange }) {
|
|
2103
|
-
const [value, setValue] =
|
|
2104
|
-
|
|
2417
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2418
|
+
React72.useEffect(() => {
|
|
2105
2419
|
setValue(defaultValue);
|
|
2106
2420
|
}, [defaultValue]);
|
|
2107
|
-
return /* @__PURE__ */
|
|
2421
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2108
2422
|
RadioGroupInput,
|
|
2109
2423
|
{
|
|
2110
2424
|
label,
|
|
@@ -2114,12 +2428,12 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2114
2428
|
onChange(fontWeight);
|
|
2115
2429
|
}
|
|
2116
2430
|
},
|
|
2117
|
-
/* @__PURE__ */
|
|
2118
|
-
/* @__PURE__ */
|
|
2431
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
|
|
2432
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
|
|
2119
2433
|
);
|
|
2120
2434
|
}
|
|
2121
2435
|
function PaddingInput({ label, defaultValue, onChange }) {
|
|
2122
|
-
const [value, setValue] =
|
|
2436
|
+
const [value, setValue] = React72.useState(() => {
|
|
2123
2437
|
if (defaultValue) {
|
|
2124
2438
|
return defaultValue;
|
|
2125
2439
|
}
|
|
@@ -2137,10 +2451,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2137
2451
|
setValue(v);
|
|
2138
2452
|
onChange(v);
|
|
2139
2453
|
}
|
|
2140
|
-
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(
|
|
2141
2455
|
RawSliderInput,
|
|
2142
2456
|
{
|
|
2143
|
-
iconLabel: /* @__PURE__ */
|
|
2457
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2144
2458
|
value: value.top,
|
|
2145
2459
|
setValue: (num) => handleChange("top", num),
|
|
2146
2460
|
units: "px",
|
|
@@ -2149,10 +2463,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2149
2463
|
max: 80,
|
|
2150
2464
|
marks: true
|
|
2151
2465
|
}
|
|
2152
|
-
), /* @__PURE__ */
|
|
2466
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2153
2467
|
RawSliderInput,
|
|
2154
2468
|
{
|
|
2155
|
-
iconLabel: /* @__PURE__ */
|
|
2469
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2156
2470
|
value: value.bottom,
|
|
2157
2471
|
setValue: (num) => handleChange("bottom", num),
|
|
2158
2472
|
units: "px",
|
|
@@ -2161,10 +2475,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2161
2475
|
max: 80,
|
|
2162
2476
|
marks: true
|
|
2163
2477
|
}
|
|
2164
|
-
), /* @__PURE__ */
|
|
2478
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2165
2479
|
RawSliderInput,
|
|
2166
2480
|
{
|
|
2167
|
-
iconLabel: /* @__PURE__ */
|
|
2481
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2168
2482
|
value: value.left,
|
|
2169
2483
|
setValue: (num) => handleChange("left", num),
|
|
2170
2484
|
units: "px",
|
|
@@ -2173,10 +2487,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2173
2487
|
max: 80,
|
|
2174
2488
|
marks: true
|
|
2175
2489
|
}
|
|
2176
|
-
), /* @__PURE__ */
|
|
2490
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2177
2491
|
RawSliderInput,
|
|
2178
2492
|
{
|
|
2179
|
-
iconLabel: /* @__PURE__ */
|
|
2493
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2180
2494
|
value: value.right,
|
|
2181
2495
|
setValue: (num) => handleChange("right", num),
|
|
2182
2496
|
units: "px",
|
|
@@ -2188,11 +2502,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2188
2502
|
));
|
|
2189
2503
|
}
|
|
2190
2504
|
function TextAlignInput({ label, defaultValue, onChange }) {
|
|
2191
|
-
const [value, setValue] =
|
|
2192
|
-
|
|
2505
|
+
const [value, setValue] = React72.useState(defaultValue != null ? defaultValue : "left");
|
|
2506
|
+
React72.useEffect(() => {
|
|
2193
2507
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2194
2508
|
}, [defaultValue]);
|
|
2195
|
-
return /* @__PURE__ */
|
|
2509
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2196
2510
|
RadioGroupInput,
|
|
2197
2511
|
{
|
|
2198
2512
|
label,
|
|
@@ -2202,9 +2516,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2202
2516
|
onChange(value2);
|
|
2203
2517
|
}
|
|
2204
2518
|
},
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
-
/* @__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" }))
|
|
2208
2522
|
);
|
|
2209
2523
|
}
|
|
2210
2524
|
|
|
@@ -2217,14 +2531,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2217
2531
|
};
|
|
2218
2532
|
switch (name) {
|
|
2219
2533
|
case "backgroundColor":
|
|
2220
|
-
return /* @__PURE__ */
|
|
2534
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
|
|
2221
2535
|
case "borderColor":
|
|
2222
|
-
return /* @__PURE__ */
|
|
2536
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
|
|
2223
2537
|
case "borderRadius":
|
|
2224
|
-
return /* @__PURE__ */
|
|
2538
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2225
2539
|
SliderInput,
|
|
2226
2540
|
{
|
|
2227
|
-
iconLabel: /* @__PURE__ */
|
|
2541
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2228
2542
|
units: "px",
|
|
2229
2543
|
step: 4,
|
|
2230
2544
|
marks: true,
|
|
@@ -2236,29 +2550,29 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2236
2550
|
}
|
|
2237
2551
|
);
|
|
2238
2552
|
case "color":
|
|
2239
|
-
return /* @__PURE__ */
|
|
2553
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
|
|
2240
2554
|
case "fontFamily":
|
|
2241
|
-
return /* @__PURE__ */
|
|
2555
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
|
|
2242
2556
|
case "fontSize":
|
|
2243
|
-
return /* @__PURE__ */
|
|
2557
|
+
return /* @__PURE__ */ React72__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
|
|
2244
2558
|
case "fontWeight":
|
|
2245
|
-
return /* @__PURE__ */
|
|
2559
|
+
return /* @__PURE__ */ React72__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
|
|
2246
2560
|
case "textAlign":
|
|
2247
|
-
return /* @__PURE__ */
|
|
2561
|
+
return /* @__PURE__ */ React72__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
|
|
2248
2562
|
case "padding":
|
|
2249
|
-
return /* @__PURE__ */
|
|
2563
|
+
return /* @__PURE__ */ React72__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
|
|
2250
2564
|
}
|
|
2251
2565
|
}
|
|
2252
2566
|
|
|
2253
2567
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2254
2568
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2255
|
-
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 })));
|
|
2256
2570
|
}
|
|
2257
2571
|
|
|
2258
2572
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
2259
2573
|
function AvatarSidebarPanel({ data, setData }) {
|
|
2260
2574
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2261
|
-
const [, setErrors] =
|
|
2575
|
+
const [, setErrors] = React72.useState(null);
|
|
2262
2576
|
const updateData = (d) => {
|
|
2263
2577
|
const res = AvatarPropsSchema.safeParse(d);
|
|
2264
2578
|
if (res.success) {
|
|
@@ -2272,11 +2586,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2272
2586
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2273
2587
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2274
2588
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2275
|
-
return /* @__PURE__ */
|
|
2589
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2276
2590
|
SliderInput,
|
|
2277
2591
|
{
|
|
2278
2592
|
label: "Size",
|
|
2279
|
-
iconLabel: /* @__PURE__ */
|
|
2593
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2280
2594
|
units: "px",
|
|
2281
2595
|
step: 3,
|
|
2282
2596
|
min: 32,
|
|
@@ -2286,7 +2600,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2286
2600
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2287
2601
|
}
|
|
2288
2602
|
}
|
|
2289
|
-
), /* @__PURE__ */
|
|
2603
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2290
2604
|
RadioGroupInput,
|
|
2291
2605
|
{
|
|
2292
2606
|
label: "Shape",
|
|
@@ -2295,10 +2609,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2295
2609
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2296
2610
|
}
|
|
2297
2611
|
},
|
|
2298
|
-
/* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
/* @__PURE__ */
|
|
2301
|
-
), /* @__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(
|
|
2302
2616
|
TextInput,
|
|
2303
2617
|
{
|
|
2304
2618
|
label: "Image URL",
|
|
@@ -2307,7 +2621,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2307
2621
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2308
2622
|
}
|
|
2309
2623
|
}
|
|
2310
|
-
), /* @__PURE__ */
|
|
2624
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2311
2625
|
TextInput,
|
|
2312
2626
|
{
|
|
2313
2627
|
label: "Alt text",
|
|
@@ -2316,7 +2630,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2316
2630
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2317
2631
|
}
|
|
2318
2632
|
}
|
|
2319
|
-
), /* @__PURE__ */
|
|
2633
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2320
2634
|
MultiStylePropertyPanel,
|
|
2321
2635
|
{
|
|
2322
2636
|
names: ["textAlign", "padding"],
|
|
@@ -2327,7 +2641,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2327
2641
|
}
|
|
2328
2642
|
function ButtonSidebarPanel({ data, setData }) {
|
|
2329
2643
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2330
|
-
const [, setErrors] =
|
|
2644
|
+
const [, setErrors] = React72.useState(null);
|
|
2331
2645
|
const updateData = (d) => {
|
|
2332
2646
|
const res = ButtonPropsSchema.safeParse(d);
|
|
2333
2647
|
if (res.success) {
|
|
@@ -2344,65 +2658,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2344
2658
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2345
2659
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2346
2660
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2347
|
-
return /* @__PURE__ */
|
|
2661
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2348
2662
|
TextInput,
|
|
2349
2663
|
{
|
|
2350
2664
|
label: "Text",
|
|
2351
2665
|
defaultValue: text,
|
|
2352
2666
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2353
2667
|
}
|
|
2354
|
-
), /* @__PURE__ */
|
|
2668
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2355
2669
|
TextInput,
|
|
2356
2670
|
{
|
|
2357
2671
|
label: "Url",
|
|
2358
2672
|
defaultValue: url,
|
|
2359
2673
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2360
2674
|
}
|
|
2361
|
-
), /* @__PURE__ */
|
|
2675
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2362
2676
|
RadioGroupInput,
|
|
2363
2677
|
{
|
|
2364
2678
|
label: "Width",
|
|
2365
2679
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2366
2680
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2367
2681
|
},
|
|
2368
|
-
/* @__PURE__ */
|
|
2369
|
-
/* @__PURE__ */
|
|
2370
|
-
), /* @__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(
|
|
2371
2685
|
RadioGroupInput,
|
|
2372
2686
|
{
|
|
2373
2687
|
label: "Size",
|
|
2374
2688
|
defaultValue: size,
|
|
2375
2689
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2376
2690
|
},
|
|
2377
|
-
/* @__PURE__ */
|
|
2378
|
-
/* @__PURE__ */
|
|
2379
|
-
/* @__PURE__ */
|
|
2380
|
-
/* @__PURE__ */
|
|
2381
|
-
), /* @__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(
|
|
2382
2696
|
RadioGroupInput,
|
|
2383
2697
|
{
|
|
2384
2698
|
label: "Style",
|
|
2385
2699
|
defaultValue: buttonStyle,
|
|
2386
2700
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2387
2701
|
},
|
|
2388
|
-
/* @__PURE__ */
|
|
2389
|
-
/* @__PURE__ */
|
|
2390
|
-
/* @__PURE__ */
|
|
2391
|
-
), /* @__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(
|
|
2392
2706
|
ColorInput2,
|
|
2393
2707
|
{
|
|
2394
2708
|
label: "Text color",
|
|
2395
2709
|
defaultValue: buttonTextColor,
|
|
2396
2710
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2397
2711
|
}
|
|
2398
|
-
), /* @__PURE__ */
|
|
2712
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2399
2713
|
ColorInput2,
|
|
2400
2714
|
{
|
|
2401
2715
|
label: "Button color",
|
|
2402
2716
|
defaultValue: buttonBackgroundColor,
|
|
2403
2717
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2404
2718
|
}
|
|
2405
|
-
), /* @__PURE__ */
|
|
2719
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2406
2720
|
MultiStylePropertyPanel,
|
|
2407
2721
|
{
|
|
2408
2722
|
names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -2428,7 +2742,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2428
2742
|
const value = parseInt(ev.target.value);
|
|
2429
2743
|
onChange(isNaN(value) ? null : value);
|
|
2430
2744
|
};
|
|
2431
|
-
return /* @__PURE__ */
|
|
2745
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2432
2746
|
material.TextField,
|
|
2433
2747
|
{
|
|
2434
2748
|
fullWidth: true,
|
|
@@ -2439,7 +2753,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2439
2753
|
placeholder: "auto",
|
|
2440
2754
|
size: "small",
|
|
2441
2755
|
InputProps: {
|
|
2442
|
-
endAdornment: /* @__PURE__ */
|
|
2756
|
+
endAdornment: /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2443
2757
|
}
|
|
2444
2758
|
}
|
|
2445
2759
|
);
|
|
@@ -2447,7 +2761,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2447
2761
|
|
|
2448
2762
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
|
|
2449
2763
|
function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
2450
|
-
const [currentValue, setCurrentValue] =
|
|
2764
|
+
const [currentValue, setCurrentValue] = React72.useState(() => {
|
|
2451
2765
|
if (defaultValue) {
|
|
2452
2766
|
return defaultValue;
|
|
2453
2767
|
}
|
|
@@ -2461,7 +2775,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2461
2775
|
};
|
|
2462
2776
|
let column3 = null;
|
|
2463
2777
|
{
|
|
2464
|
-
column3 = /* @__PURE__ */
|
|
2778
|
+
column3 = /* @__PURE__ */ React72__default.default.createElement(
|
|
2465
2779
|
TextDimensionInput,
|
|
2466
2780
|
{
|
|
2467
2781
|
label: "Column 3",
|
|
@@ -2472,7 +2786,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2472
2786
|
}
|
|
2473
2787
|
);
|
|
2474
2788
|
}
|
|
2475
|
-
return /* @__PURE__ */
|
|
2789
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2476
2790
|
TextDimensionInput,
|
|
2477
2791
|
{
|
|
2478
2792
|
label: "Column 1",
|
|
@@ -2481,7 +2795,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2481
2795
|
setIndexValue(0, v);
|
|
2482
2796
|
}
|
|
2483
2797
|
}
|
|
2484
|
-
), /* @__PURE__ */
|
|
2798
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2485
2799
|
TextDimensionInput,
|
|
2486
2800
|
{
|
|
2487
2801
|
label: "Column 2",
|
|
@@ -2496,7 +2810,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2496
2810
|
// src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
|
|
2497
2811
|
function ColumnsContainerPanel({ data, setData }) {
|
|
2498
2812
|
var _a, _b, _c, _d, _e, _f;
|
|
2499
|
-
const [, setErrors] =
|
|
2813
|
+
const [, setErrors] = React72.useState(null);
|
|
2500
2814
|
const updateData = (d) => {
|
|
2501
2815
|
const res = columns_container_props_schema_default2.safeParse(d);
|
|
2502
2816
|
if (res.success) {
|
|
@@ -2506,7 +2820,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2506
2820
|
setErrors(res.error);
|
|
2507
2821
|
}
|
|
2508
2822
|
};
|
|
2509
|
-
return /* @__PURE__ */
|
|
2823
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2510
2824
|
RadioGroupInput,
|
|
2511
2825
|
{
|
|
2512
2826
|
label: "Number of columns",
|
|
@@ -2515,9 +2829,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2515
2829
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
2516
2830
|
}
|
|
2517
2831
|
},
|
|
2518
|
-
/* @__PURE__ */
|
|
2519
|
-
/* @__PURE__ */
|
|
2520
|
-
), /* @__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(
|
|
2521
2835
|
ColumnWidthsInput,
|
|
2522
2836
|
{
|
|
2523
2837
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -2525,11 +2839,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2525
2839
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
2526
2840
|
}
|
|
2527
2841
|
}
|
|
2528
|
-
), /* @__PURE__ */
|
|
2842
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2529
2843
|
SliderInput,
|
|
2530
2844
|
{
|
|
2531
2845
|
label: "Columns gap",
|
|
2532
|
-
iconLabel: /* @__PURE__ */
|
|
2846
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
2533
2847
|
units: "px",
|
|
2534
2848
|
step: 4,
|
|
2535
2849
|
marks: true,
|
|
@@ -2538,7 +2852,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2538
2852
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
2539
2853
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
2540
2854
|
}
|
|
2541
|
-
), /* @__PURE__ */
|
|
2855
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2542
2856
|
RadioGroupInput,
|
|
2543
2857
|
{
|
|
2544
2858
|
label: "Alignment",
|
|
@@ -2547,10 +2861,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2547
2861
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
2548
2862
|
}
|
|
2549
2863
|
},
|
|
2550
|
-
/* @__PURE__ */
|
|
2551
|
-
/* @__PURE__ */
|
|
2552
|
-
/* @__PURE__ */
|
|
2553
|
-
), /* @__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(
|
|
2554
2868
|
MultiStylePropertyPanel,
|
|
2555
2869
|
{
|
|
2556
2870
|
names: ["backgroundColor", "padding"],
|
|
@@ -2569,7 +2883,7 @@ var container_props_schema_default = ContainerPropsSchema3;
|
|
|
2569
2883
|
|
|
2570
2884
|
// src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
|
|
2571
2885
|
function ContainerSidebarPanel({ data, setData }) {
|
|
2572
|
-
const [, setErrors] =
|
|
2886
|
+
const [, setErrors] = React72.useState(null);
|
|
2573
2887
|
const updateData = (d) => {
|
|
2574
2888
|
const res = container_props_schema_default.safeParse(d);
|
|
2575
2889
|
if (res.success) {
|
|
@@ -2579,7 +2893,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2579
2893
|
setErrors(res.error);
|
|
2580
2894
|
}
|
|
2581
2895
|
};
|
|
2582
|
-
return /* @__PURE__ */
|
|
2896
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2583
2897
|
MultiStylePropertyPanel,
|
|
2584
2898
|
{
|
|
2585
2899
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -2590,7 +2904,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2590
2904
|
}
|
|
2591
2905
|
function DividerSidebarPanel({ data, setData }) {
|
|
2592
2906
|
var _a, _b, _c, _d;
|
|
2593
|
-
const [, setErrors] =
|
|
2907
|
+
const [, setErrors] = React72.useState(null);
|
|
2594
2908
|
const updateData = (d) => {
|
|
2595
2909
|
const res = DividerPropsSchema.safeParse(d);
|
|
2596
2910
|
if (res.success) {
|
|
@@ -2602,18 +2916,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2602
2916
|
};
|
|
2603
2917
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
2604
2918
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
2605
|
-
return /* @__PURE__ */
|
|
2919
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2606
2920
|
ColorInput2,
|
|
2607
2921
|
{
|
|
2608
2922
|
label: "Color",
|
|
2609
2923
|
defaultValue: lineColor,
|
|
2610
2924
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
2611
2925
|
}
|
|
2612
|
-
), /* @__PURE__ */
|
|
2926
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2613
2927
|
SliderInput,
|
|
2614
2928
|
{
|
|
2615
2929
|
label: "Height",
|
|
2616
|
-
iconLabel: /* @__PURE__ */
|
|
2930
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
2617
2931
|
units: "px",
|
|
2618
2932
|
step: 1,
|
|
2619
2933
|
min: 1,
|
|
@@ -2621,7 +2935,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2621
2935
|
defaultValue: lineHeight,
|
|
2622
2936
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
2623
2937
|
}
|
|
2624
|
-
), /* @__PURE__ */
|
|
2938
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2625
2939
|
MultiStylePropertyPanel,
|
|
2626
2940
|
{
|
|
2627
2941
|
names: ["backgroundColor", "padding"],
|
|
@@ -2630,8 +2944,8 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2630
2944
|
}
|
|
2631
2945
|
));
|
|
2632
2946
|
}
|
|
2633
|
-
var
|
|
2634
|
-
var
|
|
2947
|
+
var COLOR_SCHEMA10 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
2948
|
+
var FONT_FAMILY_SCHEMA7 = zod.z.enum([
|
|
2635
2949
|
"MODERN_SANS",
|
|
2636
2950
|
"BOOK_SANS",
|
|
2637
2951
|
"ORGANIC_SANS",
|
|
@@ -2643,12 +2957,12 @@ var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
|
2643
2957
|
"MONOSPACE"
|
|
2644
2958
|
]).nullable().optional();
|
|
2645
2959
|
var EmailLayoutPropsSchema2 = zod.z.object({
|
|
2646
|
-
backdropColor:
|
|
2647
|
-
borderColor:
|
|
2960
|
+
backdropColor: COLOR_SCHEMA10,
|
|
2961
|
+
borderColor: COLOR_SCHEMA10,
|
|
2648
2962
|
borderRadius: zod.z.number().optional().nullable(),
|
|
2649
|
-
canvasColor:
|
|
2650
|
-
textColor:
|
|
2651
|
-
fontFamily:
|
|
2963
|
+
canvasColor: COLOR_SCHEMA10,
|
|
2964
|
+
textColor: COLOR_SCHEMA10,
|
|
2965
|
+
fontFamily: FONT_FAMILY_SCHEMA7,
|
|
2652
2966
|
childrenIds: zod.z.array(zod.z.string()).optional().nullable()
|
|
2653
2967
|
});
|
|
2654
2968
|
var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
@@ -2656,7 +2970,7 @@ var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
|
2656
2970
|
// src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
|
|
2657
2971
|
function EmailLayoutSidebarFields({ data, setData }) {
|
|
2658
2972
|
var _a, _b, _c, _d, _e;
|
|
2659
|
-
const [, setErrors] =
|
|
2973
|
+
const [, setErrors] = React72.useState(null);
|
|
2660
2974
|
const updateData = (d) => {
|
|
2661
2975
|
const res = email_layout_props_schema_default.safeParse(d);
|
|
2662
2976
|
if (res.success) {
|
|
@@ -2666,31 +2980,31 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2666
2980
|
setErrors(res.error);
|
|
2667
2981
|
}
|
|
2668
2982
|
};
|
|
2669
|
-
return /* @__PURE__ */
|
|
2983
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2670
2984
|
ColorInput2,
|
|
2671
2985
|
{
|
|
2672
2986
|
label: "Backdrop color",
|
|
2673
2987
|
defaultValue: (_a = data.backdropColor) != null ? _a : "#F5F5F5",
|
|
2674
2988
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
2675
2989
|
}
|
|
2676
|
-
), /* @__PURE__ */
|
|
2990
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2677
2991
|
ColorInput2,
|
|
2678
2992
|
{
|
|
2679
2993
|
label: "Canvas color",
|
|
2680
2994
|
defaultValue: (_b = data.canvasColor) != null ? _b : "#FFFFFF",
|
|
2681
2995
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
2682
2996
|
}
|
|
2683
|
-
), /* @__PURE__ */
|
|
2997
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2684
2998
|
NullableColorInput,
|
|
2685
2999
|
{
|
|
2686
3000
|
label: "Canvas border color",
|
|
2687
3001
|
defaultValue: (_c = data.borderColor) != null ? _c : null,
|
|
2688
3002
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
2689
3003
|
}
|
|
2690
|
-
), /* @__PURE__ */
|
|
3004
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2691
3005
|
SliderInput,
|
|
2692
3006
|
{
|
|
2693
|
-
iconLabel: /* @__PURE__ */
|
|
3007
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2694
3008
|
units: "px",
|
|
2695
3009
|
step: 4,
|
|
2696
3010
|
marks: true,
|
|
@@ -2700,14 +3014,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2700
3014
|
defaultValue: (_d = data.borderRadius) != null ? _d : 0,
|
|
2701
3015
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
2702
3016
|
}
|
|
2703
|
-
), /* @__PURE__ */
|
|
3017
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2704
3018
|
NullableFontFamily,
|
|
2705
3019
|
{
|
|
2706
3020
|
label: "Font family",
|
|
2707
3021
|
defaultValue: "MODERN_SANS",
|
|
2708
3022
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
2709
3023
|
}
|
|
2710
|
-
), /* @__PURE__ */
|
|
3024
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2711
3025
|
ColorInput2,
|
|
2712
3026
|
{
|
|
2713
3027
|
label: "Text color",
|
|
@@ -2718,7 +3032,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2718
3032
|
}
|
|
2719
3033
|
function HeadingSidebarPanel({ data, setData }) {
|
|
2720
3034
|
var _a, _b, _c, _d;
|
|
2721
|
-
const [, setErrors] =
|
|
3035
|
+
const [, setErrors] = React72.useState(null);
|
|
2722
3036
|
const updateData = (d) => {
|
|
2723
3037
|
const res = HeadingPropsSchema.safeParse(d);
|
|
2724
3038
|
if (res.success) {
|
|
@@ -2728,7 +3042,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2728
3042
|
setErrors(res.error);
|
|
2729
3043
|
}
|
|
2730
3044
|
};
|
|
2731
|
-
return /* @__PURE__ */
|
|
3045
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2732
3046
|
TextInput,
|
|
2733
3047
|
{
|
|
2734
3048
|
label: "Content",
|
|
@@ -2738,7 +3052,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2738
3052
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
2739
3053
|
}
|
|
2740
3054
|
}
|
|
2741
|
-
), /* @__PURE__ */
|
|
3055
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2742
3056
|
RadioGroupInput,
|
|
2743
3057
|
{
|
|
2744
3058
|
label: "Level",
|
|
@@ -2747,10 +3061,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2747
3061
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
2748
3062
|
}
|
|
2749
3063
|
},
|
|
2750
|
-
/* @__PURE__ */
|
|
2751
|
-
/* @__PURE__ */
|
|
2752
|
-
/* @__PURE__ */
|
|
2753
|
-
), /* @__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(
|
|
2754
3068
|
MultiStylePropertyPanel,
|
|
2755
3069
|
{
|
|
2756
3070
|
names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
|
|
@@ -2761,7 +3075,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2761
3075
|
}
|
|
2762
3076
|
function HtmlSidebarPanel({ data, setData }) {
|
|
2763
3077
|
var _a, _b;
|
|
2764
|
-
const [, setErrors] =
|
|
3078
|
+
const [, setErrors] = React72.useState(null);
|
|
2765
3079
|
const updateData = (d) => {
|
|
2766
3080
|
const res = HtmlPropsSchema.safeParse(d);
|
|
2767
3081
|
if (res.success) {
|
|
@@ -2771,7 +3085,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2771
3085
|
setErrors(res.error);
|
|
2772
3086
|
}
|
|
2773
3087
|
};
|
|
2774
|
-
return /* @__PURE__ */
|
|
3088
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2775
3089
|
TextInput,
|
|
2776
3090
|
{
|
|
2777
3091
|
label: "Content",
|
|
@@ -2779,7 +3093,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2779
3093
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
2780
3094
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
2781
3095
|
}
|
|
2782
|
-
), /* @__PURE__ */
|
|
3096
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2783
3097
|
MultiStylePropertyPanel,
|
|
2784
3098
|
{
|
|
2785
3099
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -2790,7 +3104,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2790
3104
|
}
|
|
2791
3105
|
function ImageSidebarPanel({ data, setData }) {
|
|
2792
3106
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
2793
|
-
const [, setErrors] =
|
|
3107
|
+
const [, setErrors] = React72.useState(null);
|
|
2794
3108
|
const updateData = (d) => {
|
|
2795
3109
|
const res = ImagePropsSchema.safeParse(d);
|
|
2796
3110
|
if (res.success) {
|
|
@@ -2800,7 +3114,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2800
3114
|
setErrors(res.error);
|
|
2801
3115
|
}
|
|
2802
3116
|
};
|
|
2803
|
-
return /* @__PURE__ */
|
|
3117
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2804
3118
|
TextInput,
|
|
2805
3119
|
{
|
|
2806
3120
|
label: "Source URL",
|
|
@@ -2810,14 +3124,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2810
3124
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
|
|
2811
3125
|
}
|
|
2812
3126
|
}
|
|
2813
|
-
), /* @__PURE__ */
|
|
3127
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2814
3128
|
TextInput,
|
|
2815
3129
|
{
|
|
2816
3130
|
label: "Alt text",
|
|
2817
3131
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
2818
3132
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
2819
3133
|
}
|
|
2820
|
-
), /* @__PURE__ */
|
|
3134
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2821
3135
|
TextInput,
|
|
2822
3136
|
{
|
|
2823
3137
|
label: "Click through URL",
|
|
@@ -2827,31 +3141,31 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2827
3141
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
2828
3142
|
}
|
|
2829
3143
|
}
|
|
2830
|
-
), /* @__PURE__ */
|
|
3144
|
+
), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2831
3145
|
TextDimensionInput,
|
|
2832
3146
|
{
|
|
2833
3147
|
label: "Width",
|
|
2834
3148
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
2835
3149
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
2836
3150
|
}
|
|
2837
|
-
), /* @__PURE__ */
|
|
3151
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2838
3152
|
TextDimensionInput,
|
|
2839
3153
|
{
|
|
2840
3154
|
label: "Height",
|
|
2841
3155
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
2842
3156
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
2843
3157
|
}
|
|
2844
|
-
)), /* @__PURE__ */
|
|
3158
|
+
)), /* @__PURE__ */ React72__default.default.createElement(
|
|
2845
3159
|
RadioGroupInput,
|
|
2846
3160
|
{
|
|
2847
3161
|
label: "Alignment",
|
|
2848
3162
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
2849
3163
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
2850
3164
|
},
|
|
2851
|
-
/* @__PURE__ */
|
|
2852
|
-
/* @__PURE__ */
|
|
2853
|
-
/* @__PURE__ */
|
|
2854
|
-
), /* @__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(
|
|
2855
3169
|
MultiStylePropertyPanel,
|
|
2856
3170
|
{
|
|
2857
3171
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
@@ -2860,9 +3174,160 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2860
3174
|
}
|
|
2861
3175
|
));
|
|
2862
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
|
+
}
|
|
2863
3328
|
function SpacerSidebarPanel({ data, setData }) {
|
|
2864
3329
|
var _a, _b;
|
|
2865
|
-
const [, setErrors] =
|
|
3330
|
+
const [, setErrors] = React72.useState(null);
|
|
2866
3331
|
const updateData = (d) => {
|
|
2867
3332
|
const res = SpacerPropsSchema.safeParse(d);
|
|
2868
3333
|
if (res.success) {
|
|
@@ -2872,11 +3337,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
2872
3337
|
setErrors(res.error);
|
|
2873
3338
|
}
|
|
2874
3339
|
};
|
|
2875
|
-
return /* @__PURE__ */
|
|
3340
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2876
3341
|
SliderInput,
|
|
2877
3342
|
{
|
|
2878
3343
|
label: "Height",
|
|
2879
|
-
iconLabel: /* @__PURE__ */
|
|
3344
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
2880
3345
|
units: "px",
|
|
2881
3346
|
step: 4,
|
|
2882
3347
|
min: 4,
|
|
@@ -2887,15 +3352,15 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
2887
3352
|
));
|
|
2888
3353
|
}
|
|
2889
3354
|
function BooleanInput({ label, defaultValue, onChange }) {
|
|
2890
|
-
const [value, setValue] =
|
|
2891
|
-
|
|
3355
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
3356
|
+
React72.useEffect(() => {
|
|
2892
3357
|
setValue(defaultValue);
|
|
2893
3358
|
}, [defaultValue]);
|
|
2894
|
-
return /* @__PURE__ */
|
|
3359
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2895
3360
|
material.FormControlLabel,
|
|
2896
3361
|
{
|
|
2897
3362
|
label,
|
|
2898
|
-
control: /* @__PURE__ */
|
|
3363
|
+
control: /* @__PURE__ */ React72__default.default.createElement(
|
|
2899
3364
|
material.Switch,
|
|
2900
3365
|
{
|
|
2901
3366
|
checked: value,
|
|
@@ -2912,7 +3377,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
2912
3377
|
// src/app/inspector-drawer/configuration-panel/input-panels/text-sidebar-panel.tsx
|
|
2913
3378
|
function TextSidebarPanel({ data, setData }) {
|
|
2914
3379
|
var _a, _b, _c, _d;
|
|
2915
|
-
const [, setErrors] =
|
|
3380
|
+
const [, setErrors] = React72.useState(null);
|
|
2916
3381
|
const updateData = (d) => {
|
|
2917
3382
|
const res = TextPropsSchema.safeParse(d);
|
|
2918
3383
|
if (res.success) {
|
|
@@ -2922,7 +3387,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
2922
3387
|
setErrors(res.error);
|
|
2923
3388
|
}
|
|
2924
3389
|
};
|
|
2925
|
-
return /* @__PURE__ */
|
|
3390
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2926
3391
|
TextInput,
|
|
2927
3392
|
{
|
|
2928
3393
|
label: "Content",
|
|
@@ -2930,14 +3395,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
2930
3395
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
2931
3396
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
2932
3397
|
}
|
|
2933
|
-
), /* @__PURE__ */
|
|
3398
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2934
3399
|
BooleanInput,
|
|
2935
3400
|
{
|
|
2936
3401
|
label: "Markdown",
|
|
2937
3402
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
2938
3403
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
2939
3404
|
}
|
|
2940
|
-
), /* @__PURE__ */
|
|
3405
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2941
3406
|
MultiStylePropertyPanel,
|
|
2942
3407
|
{
|
|
2943
3408
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -2949,7 +3414,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
2949
3414
|
|
|
2950
3415
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
2951
3416
|
function renderMessage(val) {
|
|
2952
|
-
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));
|
|
2953
3418
|
}
|
|
2954
3419
|
function ConfigurationPanel() {
|
|
2955
3420
|
const document2 = useDocument();
|
|
@@ -2965,53 +3430,55 @@ function ConfigurationPanel() {
|
|
|
2965
3430
|
const { data, type } = block;
|
|
2966
3431
|
switch (type) {
|
|
2967
3432
|
case "Avatar":
|
|
2968
|
-
return /* @__PURE__ */
|
|
3433
|
+
return /* @__PURE__ */ React72__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2969
3434
|
case "Button":
|
|
2970
|
-
return /* @__PURE__ */
|
|
3435
|
+
return /* @__PURE__ */ React72__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2971
3436
|
case "ColumnsContainer":
|
|
2972
|
-
return /* @__PURE__ */
|
|
3437
|
+
return /* @__PURE__ */ React72__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2973
3438
|
case "Container":
|
|
2974
|
-
return /* @__PURE__ */
|
|
3439
|
+
return /* @__PURE__ */ React72__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2975
3440
|
case "Divider":
|
|
2976
|
-
return /* @__PURE__ */
|
|
3441
|
+
return /* @__PURE__ */ React72__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2977
3442
|
case "Heading":
|
|
2978
|
-
return /* @__PURE__ */
|
|
3443
|
+
return /* @__PURE__ */ React72__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2979
3444
|
case "Html":
|
|
2980
|
-
return /* @__PURE__ */
|
|
3445
|
+
return /* @__PURE__ */ React72__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2981
3446
|
case "Image":
|
|
2982
|
-
return /* @__PURE__ */
|
|
3447
|
+
return /* @__PURE__ */ React72__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2983
3448
|
case "EmailLayout":
|
|
2984
|
-
return /* @__PURE__ */
|
|
3449
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2985
3450
|
case "Spacer":
|
|
2986
|
-
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 }) });
|
|
2987
3454
|
case "Text":
|
|
2988
|
-
return /* @__PURE__ */
|
|
3455
|
+
return /* @__PURE__ */ React72__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2989
3456
|
default:
|
|
2990
|
-
return /* @__PURE__ */
|
|
3457
|
+
return /* @__PURE__ */ React72__default.default.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
2991
3458
|
}
|
|
2992
3459
|
}
|
|
2993
3460
|
function StylesPanel() {
|
|
2994
3461
|
const block = useDocument().root;
|
|
2995
3462
|
if (!block) {
|
|
2996
|
-
return /* @__PURE__ */
|
|
3463
|
+
return /* @__PURE__ */ React72__default.default.createElement("p", null, "Block not found");
|
|
2997
3464
|
}
|
|
2998
3465
|
const { data, type } = block;
|
|
2999
3466
|
if (type !== "EmailLayout") {
|
|
3000
3467
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3001
3468
|
}
|
|
3002
|
-
return /* @__PURE__ */
|
|
3469
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3003
3470
|
}
|
|
3004
3471
|
function TemplateDownloadButton() {
|
|
3005
3472
|
const doc = useDocument();
|
|
3006
|
-
const href =
|
|
3473
|
+
const href = React72.useMemo(() => {
|
|
3007
3474
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3008
3475
|
}, [doc]);
|
|
3009
|
-
return /* @__PURE__ */
|
|
3476
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3010
3477
|
material.Button,
|
|
3011
3478
|
{
|
|
3012
3479
|
variant: "outlined",
|
|
3013
3480
|
color: "primary",
|
|
3014
|
-
startIcon: /* @__PURE__ */
|
|
3481
|
+
startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
|
|
3015
3482
|
href,
|
|
3016
3483
|
download: "emailTemplate.json",
|
|
3017
3484
|
fullWidth: true
|
|
@@ -3043,9 +3510,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3043
3510
|
}
|
|
3044
3511
|
};
|
|
3045
3512
|
if (!currentTemplateId) {
|
|
3046
|
-
return /* @__PURE__ */
|
|
3513
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
|
|
3047
3514
|
}
|
|
3048
|
-
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(
|
|
3049
3516
|
material.Typography,
|
|
3050
3517
|
{
|
|
3051
3518
|
variant: "body2",
|
|
@@ -3058,29 +3525,29 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3058
3525
|
}
|
|
3059
3526
|
},
|
|
3060
3527
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
3061
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
3528
|
+
), persistenceEnabled && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3062
3529
|
material.Button,
|
|
3063
3530
|
{
|
|
3064
3531
|
variant: "outlined",
|
|
3065
3532
|
color: "primary",
|
|
3066
|
-
startIcon: /* @__PURE__ */
|
|
3533
|
+
startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
|
|
3067
3534
|
onClick: handleCopyToSamples,
|
|
3068
3535
|
fullWidth: true,
|
|
3069
3536
|
disabled: !copyTemplate
|
|
3070
3537
|
},
|
|
3071
3538
|
"Save as Sample Template"
|
|
3072
|
-
), /* @__PURE__ */
|
|
3539
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3073
3540
|
material.Button,
|
|
3074
3541
|
{
|
|
3075
3542
|
variant: "outlined",
|
|
3076
3543
|
color: "error",
|
|
3077
|
-
startIcon: /* @__PURE__ */
|
|
3544
|
+
startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DeleteOutlined, null),
|
|
3078
3545
|
onClick: handleDelete,
|
|
3079
3546
|
fullWidth: true,
|
|
3080
3547
|
disabled: !deleteTemplate
|
|
3081
3548
|
},
|
|
3082
3549
|
"Delete Template"
|
|
3083
|
-
)))), 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))));
|
|
3084
3551
|
}
|
|
3085
3552
|
|
|
3086
3553
|
// src/app/inspector-drawer/index.tsx
|
|
@@ -3097,11 +3564,11 @@ function InspectorDrawer({
|
|
|
3097
3564
|
const renderCurrentSidebarPanel = () => {
|
|
3098
3565
|
switch (selectedSidebarTab) {
|
|
3099
3566
|
case "block-configuration":
|
|
3100
|
-
return /* @__PURE__ */
|
|
3567
|
+
return /* @__PURE__ */ React72__default.default.createElement(ConfigurationPanel, null);
|
|
3101
3568
|
case "styles":
|
|
3102
|
-
return /* @__PURE__ */
|
|
3569
|
+
return /* @__PURE__ */ React72__default.default.createElement(StylesPanel, null);
|
|
3103
3570
|
case "template-settings":
|
|
3104
|
-
return /* @__PURE__ */
|
|
3571
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3105
3572
|
TemplatePanel,
|
|
3106
3573
|
{
|
|
3107
3574
|
deleteTemplate,
|
|
@@ -3110,7 +3577,7 @@ function InspectorDrawer({
|
|
|
3110
3577
|
);
|
|
3111
3578
|
}
|
|
3112
3579
|
};
|
|
3113
|
-
return /* @__PURE__ */
|
|
3580
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3114
3581
|
material.Drawer,
|
|
3115
3582
|
{
|
|
3116
3583
|
variant: "persistent",
|
|
@@ -3132,8 +3599,8 @@ function InspectorDrawer({
|
|
|
3132
3599
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
3133
3600
|
}
|
|
3134
3601
|
},
|
|
3135
|
-
/* @__PURE__ */
|
|
3136
|
-
/* @__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())
|
|
3137
3604
|
);
|
|
3138
3605
|
}
|
|
3139
3606
|
function SidebarButton({
|
|
@@ -3155,7 +3622,7 @@ function SidebarButton({
|
|
|
3155
3622
|
console.error("Error loading template:", error);
|
|
3156
3623
|
}
|
|
3157
3624
|
});
|
|
3158
|
-
return /* @__PURE__ */
|
|
3625
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Button, { size: "small", onClick: handleClick, sx: sx2 }, children);
|
|
3159
3626
|
}
|
|
3160
3627
|
|
|
3161
3628
|
// sample-templates/empty-email-message.ts
|
|
@@ -3191,10 +3658,10 @@ function SamplesDrawer({
|
|
|
3191
3658
|
deleteTemplate
|
|
3192
3659
|
}) {
|
|
3193
3660
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
3194
|
-
const [samples, setSamples] =
|
|
3195
|
-
const [templates, setTemplates] =
|
|
3196
|
-
const [loadingSamples, setLoadingSamples] =
|
|
3197
|
-
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);
|
|
3198
3665
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
3199
3666
|
if (templateId === "empty-email") {
|
|
3200
3667
|
return empty_email_message_default;
|
|
@@ -3204,7 +3671,7 @@ function SamplesDrawer({
|
|
|
3204
3671
|
}
|
|
3205
3672
|
return null;
|
|
3206
3673
|
});
|
|
3207
|
-
|
|
3674
|
+
React72.useEffect(() => {
|
|
3208
3675
|
if (enabled && samplesDrawerOpen && loadSamples) {
|
|
3209
3676
|
setLoadingSamples(true);
|
|
3210
3677
|
loadSamples().then((results) => {
|
|
@@ -3222,7 +3689,7 @@ function SamplesDrawer({
|
|
|
3222
3689
|
});
|
|
3223
3690
|
}
|
|
3224
3691
|
}, [enabled, samplesDrawerOpen, loadSamples]);
|
|
3225
|
-
|
|
3692
|
+
React72.useEffect(() => {
|
|
3226
3693
|
if (enabled && loadTemplates) {
|
|
3227
3694
|
setLoadingTemplates(true);
|
|
3228
3695
|
loadTemplates().then((results) => {
|
|
@@ -3234,7 +3701,7 @@ function SamplesDrawer({
|
|
|
3234
3701
|
});
|
|
3235
3702
|
}
|
|
3236
3703
|
}, [enabled, loadTemplates]);
|
|
3237
|
-
|
|
3704
|
+
React72.useEffect(() => {
|
|
3238
3705
|
const handleTemplateListUpdate = (e) => {
|
|
3239
3706
|
setTemplates(e.detail);
|
|
3240
3707
|
};
|
|
@@ -3244,7 +3711,7 @@ function SamplesDrawer({
|
|
|
3244
3711
|
if (!enabled) {
|
|
3245
3712
|
return null;
|
|
3246
3713
|
}
|
|
3247
|
-
return /* @__PURE__ */
|
|
3714
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3248
3715
|
material.Drawer,
|
|
3249
3716
|
{
|
|
3250
3717
|
variant: "persistent",
|
|
@@ -3266,7 +3733,7 @@ function SamplesDrawer({
|
|
|
3266
3733
|
width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
|
|
3267
3734
|
}
|
|
3268
3735
|
},
|
|
3269
|
-
/* @__PURE__ */
|
|
3736
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3270
3737
|
material.Stack,
|
|
3271
3738
|
{
|
|
3272
3739
|
spacing: 3,
|
|
@@ -3276,7 +3743,7 @@ function SamplesDrawer({
|
|
|
3276
3743
|
justifyContent: "space-between",
|
|
3277
3744
|
height: "100%"
|
|
3278
3745
|
},
|
|
3279
|
-
/* @__PURE__ */
|
|
3746
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3280
3747
|
material.Stack,
|
|
3281
3748
|
{
|
|
3282
3749
|
spacing: 2,
|
|
@@ -3287,8 +3754,8 @@ function SamplesDrawer({
|
|
|
3287
3754
|
}
|
|
3288
3755
|
}
|
|
3289
3756
|
},
|
|
3290
|
-
/* @__PURE__ */
|
|
3291
|
-
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(
|
|
3292
3759
|
material.Typography,
|
|
3293
3760
|
{
|
|
3294
3761
|
variant: "subtitle2",
|
|
@@ -3296,7 +3763,7 @@ function SamplesDrawer({
|
|
|
3296
3763
|
sx: { fontWeight: "bold", mt: 2 }
|
|
3297
3764
|
},
|
|
3298
3765
|
"Your Templates"
|
|
3299
|
-
), 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(
|
|
3300
3767
|
material.Box,
|
|
3301
3768
|
{
|
|
3302
3769
|
key: template.id,
|
|
@@ -3311,7 +3778,7 @@ function SamplesDrawer({
|
|
|
3311
3778
|
}
|
|
3312
3779
|
}
|
|
3313
3780
|
},
|
|
3314
|
-
/* @__PURE__ */
|
|
3781
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3315
3782
|
SidebarButton,
|
|
3316
3783
|
{
|
|
3317
3784
|
templateId: template.id,
|
|
@@ -3320,15 +3787,15 @@ function SamplesDrawer({
|
|
|
3320
3787
|
},
|
|
3321
3788
|
template.name
|
|
3322
3789
|
)
|
|
3323
|
-
))) : /* @__PURE__ */
|
|
3790
|
+
))) : /* @__PURE__ */ React72__default.default.createElement(
|
|
3324
3791
|
material.Typography,
|
|
3325
3792
|
{
|
|
3326
3793
|
variant: "body2",
|
|
3327
3794
|
sx: { color: "text.secondary", py: 1 }
|
|
3328
3795
|
},
|
|
3329
3796
|
"No saved templates"
|
|
3330
|
-
), /* @__PURE__ */
|
|
3331
|
-
/* @__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(
|
|
3332
3799
|
material.Typography,
|
|
3333
3800
|
{
|
|
3334
3801
|
variant: "subtitle2",
|
|
@@ -3336,7 +3803,7 @@ function SamplesDrawer({
|
|
|
3336
3803
|
sx: { fontWeight: "bold", mt: 1 }
|
|
3337
3804
|
},
|
|
3338
3805
|
"Sample Templates"
|
|
3339
|
-
), 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(
|
|
3340
3807
|
SidebarButton,
|
|
3341
3808
|
{
|
|
3342
3809
|
key: sample.id,
|
|
@@ -3361,7 +3828,7 @@ var ICON_SX = {
|
|
|
3361
3828
|
borderColor: "cadet.300"
|
|
3362
3829
|
};
|
|
3363
3830
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
3364
|
-
return /* @__PURE__ */
|
|
3831
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3365
3832
|
material.Button,
|
|
3366
3833
|
{
|
|
3367
3834
|
sx: BUTTON_SX2,
|
|
@@ -3370,14 +3837,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
3370
3837
|
onClick();
|
|
3371
3838
|
}
|
|
3372
3839
|
},
|
|
3373
|
-
/* @__PURE__ */
|
|
3374
|
-
/* @__PURE__ */
|
|
3840
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
3841
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
3375
3842
|
);
|
|
3376
3843
|
}
|
|
3377
3844
|
var BUTTONS = [
|
|
3378
3845
|
{
|
|
3379
3846
|
label: "Heading",
|
|
3380
|
-
icon: /* @__PURE__ */
|
|
3847
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
3381
3848
|
block: () => ({
|
|
3382
3849
|
type: "Heading",
|
|
3383
3850
|
data: {
|
|
@@ -3390,7 +3857,7 @@ var BUTTONS = [
|
|
|
3390
3857
|
},
|
|
3391
3858
|
{
|
|
3392
3859
|
label: "Text",
|
|
3393
|
-
icon: /* @__PURE__ */
|
|
3860
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
3394
3861
|
block: () => ({
|
|
3395
3862
|
type: "Text",
|
|
3396
3863
|
data: {
|
|
@@ -3404,7 +3871,7 @@ var BUTTONS = [
|
|
|
3404
3871
|
},
|
|
3405
3872
|
{
|
|
3406
3873
|
label: "Button",
|
|
3407
|
-
icon: /* @__PURE__ */
|
|
3874
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
3408
3875
|
block: () => ({
|
|
3409
3876
|
type: "Button",
|
|
3410
3877
|
data: {
|
|
@@ -3418,7 +3885,7 @@ var BUTTONS = [
|
|
|
3418
3885
|
},
|
|
3419
3886
|
{
|
|
3420
3887
|
label: "Image",
|
|
3421
|
-
icon: /* @__PURE__ */
|
|
3888
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
3422
3889
|
block: () => ({
|
|
3423
3890
|
type: "Image",
|
|
3424
3891
|
data: {
|
|
@@ -3434,7 +3901,7 @@ var BUTTONS = [
|
|
|
3434
3901
|
},
|
|
3435
3902
|
{
|
|
3436
3903
|
label: "Avatar",
|
|
3437
|
-
icon: /* @__PURE__ */
|
|
3904
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
3438
3905
|
block: () => ({
|
|
3439
3906
|
type: "Avatar",
|
|
3440
3907
|
data: {
|
|
@@ -3446,9 +3913,51 @@ var BUTTONS = [
|
|
|
3446
3913
|
}
|
|
3447
3914
|
})
|
|
3448
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
|
+
},
|
|
3449
3958
|
{
|
|
3450
3959
|
label: "Divider",
|
|
3451
|
-
icon: /* @__PURE__ */
|
|
3960
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
3452
3961
|
block: () => ({
|
|
3453
3962
|
type: "Divider",
|
|
3454
3963
|
data: {
|
|
@@ -3461,7 +3970,7 @@ var BUTTONS = [
|
|
|
3461
3970
|
},
|
|
3462
3971
|
{
|
|
3463
3972
|
label: "Spacer",
|
|
3464
|
-
icon: /* @__PURE__ */
|
|
3973
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
3465
3974
|
block: () => ({
|
|
3466
3975
|
type: "Spacer",
|
|
3467
3976
|
data: {}
|
|
@@ -3469,7 +3978,7 @@ var BUTTONS = [
|
|
|
3469
3978
|
},
|
|
3470
3979
|
{
|
|
3471
3980
|
label: "Html",
|
|
3472
|
-
icon: /* @__PURE__ */
|
|
3981
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
3473
3982
|
block: () => ({
|
|
3474
3983
|
type: "Html",
|
|
3475
3984
|
data: {
|
|
@@ -3484,7 +3993,7 @@ var BUTTONS = [
|
|
|
3484
3993
|
},
|
|
3485
3994
|
{
|
|
3486
3995
|
label: "Columns",
|
|
3487
|
-
icon: /* @__PURE__ */
|
|
3996
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
3488
3997
|
block: () => ({
|
|
3489
3998
|
type: "ColumnsContainer",
|
|
3490
3999
|
data: {
|
|
@@ -3499,7 +4008,7 @@ var BUTTONS = [
|
|
|
3499
4008
|
},
|
|
3500
4009
|
{
|
|
3501
4010
|
label: "Container",
|
|
3502
|
-
icon: /* @__PURE__ */
|
|
4011
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
3503
4012
|
block: () => ({
|
|
3504
4013
|
type: "Container",
|
|
3505
4014
|
data: {
|
|
@@ -3523,7 +4032,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
3523
4032
|
if (anchorEl === null) {
|
|
3524
4033
|
return null;
|
|
3525
4034
|
}
|
|
3526
|
-
return /* @__PURE__ */
|
|
4035
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3527
4036
|
material.Menu,
|
|
3528
4037
|
{
|
|
3529
4038
|
open: true,
|
|
@@ -3532,12 +4041,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
3532
4041
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3533
4042
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
3534
4043
|
},
|
|
3535
|
-
/* @__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()) })))
|
|
3536
4045
|
);
|
|
3537
4046
|
}
|
|
3538
4047
|
function DividerButton({ buttonElement, onClick }) {
|
|
3539
|
-
const [visible, setVisible] =
|
|
3540
|
-
|
|
4048
|
+
const [visible, setVisible] = React72.useState(false);
|
|
4049
|
+
React72.useEffect(() => {
|
|
3541
4050
|
function listener({ clientX, clientY }) {
|
|
3542
4051
|
if (!buttonElement) {
|
|
3543
4052
|
return;
|
|
@@ -3559,7 +4068,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
3559
4068
|
window.removeEventListener("mousemove", listener);
|
|
3560
4069
|
};
|
|
3561
4070
|
}, [buttonElement, setVisible]);
|
|
3562
|
-
return /* @__PURE__ */
|
|
4071
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React72__default.default.createElement(
|
|
3563
4072
|
material.IconButton,
|
|
3564
4073
|
{
|
|
3565
4074
|
size: "small",
|
|
@@ -3582,11 +4091,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
3582
4091
|
onClick();
|
|
3583
4092
|
}
|
|
3584
4093
|
},
|
|
3585
|
-
/* @__PURE__ */
|
|
4094
|
+
/* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
3586
4095
|
));
|
|
3587
4096
|
}
|
|
3588
4097
|
function PlaceholderButton({ onClick }) {
|
|
3589
|
-
return /* @__PURE__ */
|
|
4098
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3590
4099
|
material.ButtonBase,
|
|
3591
4100
|
{
|
|
3592
4101
|
onClick: (ev) => {
|
|
@@ -3602,7 +4111,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
3602
4111
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
3603
4112
|
}
|
|
3604
4113
|
},
|
|
3605
|
-
/* @__PURE__ */
|
|
4114
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3606
4115
|
iconsMaterial.AddOutlined,
|
|
3607
4116
|
{
|
|
3608
4117
|
sx: {
|
|
@@ -3619,19 +4128,19 @@ function PlaceholderButton({ onClick }) {
|
|
|
3619
4128
|
|
|
3620
4129
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
3621
4130
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
3622
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
3623
|
-
const [buttonElement, setButtonElement] =
|
|
4131
|
+
const [menuAnchorEl, setMenuAnchorEl] = React72.useState(null);
|
|
4132
|
+
const [buttonElement, setButtonElement] = React72.useState(null);
|
|
3624
4133
|
const handleButtonClick = () => {
|
|
3625
4134
|
setMenuAnchorEl(buttonElement);
|
|
3626
4135
|
};
|
|
3627
|
-
const
|
|
4136
|
+
const renderButton2 = () => {
|
|
3628
4137
|
if (placeholder) {
|
|
3629
|
-
return /* @__PURE__ */
|
|
4138
|
+
return /* @__PURE__ */ React72__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
3630
4139
|
} else {
|
|
3631
|
-
return /* @__PURE__ */
|
|
4140
|
+
return /* @__PURE__ */ React72__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
3632
4141
|
}
|
|
3633
4142
|
};
|
|
3634
|
-
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 }));
|
|
3635
4144
|
}
|
|
3636
4145
|
|
|
3637
4146
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -3658,9 +4167,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
|
|
|
3658
4167
|
});
|
|
3659
4168
|
};
|
|
3660
4169
|
if (!childrenIds || childrenIds.length === 0) {
|
|
3661
|
-
return /* @__PURE__ */
|
|
4170
|
+
return /* @__PURE__ */ React72__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
|
|
3662
4171
|
}
|
|
3663
|
-
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 }));
|
|
3664
4173
|
}
|
|
3665
4174
|
|
|
3666
4175
|
// src/editor/blocks/columns-container/columns-container-editor.tsx
|
|
@@ -3687,15 +4196,15 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
3687
4196
|
});
|
|
3688
4197
|
setSelectedBlockId(blockId);
|
|
3689
4198
|
};
|
|
3690
|
-
return /* @__PURE__ */
|
|
4199
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3691
4200
|
columns_container_default,
|
|
3692
4201
|
{
|
|
3693
4202
|
props: restProps,
|
|
3694
4203
|
style,
|
|
3695
4204
|
columns: [
|
|
3696
|
-
/* @__PURE__ */
|
|
3697
|
-
/* @__PURE__ */
|
|
3698
|
-
/* @__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) })
|
|
3699
4208
|
]
|
|
3700
4209
|
}
|
|
3701
4210
|
);
|
|
@@ -3705,7 +4214,7 @@ function ContainerEditor({ style, props }) {
|
|
|
3705
4214
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
3706
4215
|
const document2 = useDocument();
|
|
3707
4216
|
const currentBlockId = useCurrentBlockId();
|
|
3708
|
-
return /* @__PURE__ */
|
|
4217
|
+
return /* @__PURE__ */ React72__default.default.createElement(container_default, { style }, /* @__PURE__ */ React72__default.default.createElement(
|
|
3709
4218
|
EditorChildrenIds,
|
|
3710
4219
|
{
|
|
3711
4220
|
childrenIds,
|
|
@@ -3724,7 +4233,65 @@ function ContainerEditor({ style, props }) {
|
|
|
3724
4233
|
}
|
|
3725
4234
|
));
|
|
3726
4235
|
}
|
|
3727
|
-
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) {
|
|
3728
4295
|
const f = fontFamily != null ? fontFamily : "MODERN_SANS";
|
|
3729
4296
|
switch (f) {
|
|
3730
4297
|
case "MODERN_SANS":
|
|
@@ -3752,7 +4319,93 @@ function EmailLayoutEditor(props) {
|
|
|
3752
4319
|
const childrenIds = (_a = props.childrenIds) != null ? _a : [];
|
|
3753
4320
|
const document2 = useDocument();
|
|
3754
4321
|
const currentBlockId = useCurrentBlockId();
|
|
3755
|
-
|
|
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(
|
|
3756
4409
|
"div",
|
|
3757
4410
|
{
|
|
3758
4411
|
onClick: () => {
|
|
@@ -3761,7 +4414,7 @@ function EmailLayoutEditor(props) {
|
|
|
3761
4414
|
style: {
|
|
3762
4415
|
backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
|
|
3763
4416
|
color: (_c = props.textColor) != null ? _c : "#262626",
|
|
3764
|
-
fontFamily:
|
|
4417
|
+
fontFamily: getFontFamily7(props.fontFamily),
|
|
3765
4418
|
fontSize: "16px",
|
|
3766
4419
|
fontWeight: "400",
|
|
3767
4420
|
letterSpacing: "0.15008px",
|
|
@@ -3772,7 +4425,7 @@ function EmailLayoutEditor(props) {
|
|
|
3772
4425
|
minHeight: "100%"
|
|
3773
4426
|
}
|
|
3774
4427
|
},
|
|
3775
|
-
/* @__PURE__ */
|
|
4428
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3776
4429
|
"table",
|
|
3777
4430
|
{
|
|
3778
4431
|
align: "center",
|
|
@@ -3795,7 +4448,7 @@ function EmailLayoutEditor(props) {
|
|
|
3795
4448
|
cellPadding: "0",
|
|
3796
4449
|
border: 0
|
|
3797
4450
|
},
|
|
3798
|
-
/* @__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(
|
|
3799
4452
|
EditorChildrenIds,
|
|
3800
4453
|
{
|
|
3801
4454
|
childrenIds,
|
|
@@ -3825,6 +4478,33 @@ var sx = {
|
|
|
3825
4478
|
paddingY: 1,
|
|
3826
4479
|
zIndex: "fab"
|
|
3827
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
|
+
}
|
|
3828
4508
|
function TuneMenu({ blockId }) {
|
|
3829
4509
|
const document2 = useDocument();
|
|
3830
4510
|
const handleDeleteClick = () => {
|
|
@@ -3878,6 +4558,11 @@ function TuneMenu({ blockId }) {
|
|
|
3878
4558
|
delete nDocument[blockId];
|
|
3879
4559
|
resetDocument(nDocument);
|
|
3880
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
|
+
};
|
|
3881
4566
|
const handleMoveClick = (direction) => {
|
|
3882
4567
|
var _a, _b, _c;
|
|
3883
4568
|
const moveChildrenIds = (ids) => {
|
|
@@ -3939,13 +4624,13 @@ function TuneMenu({ blockId }) {
|
|
|
3939
4624
|
resetDocument(nDocument);
|
|
3940
4625
|
setSelectedBlockId(blockId);
|
|
3941
4626
|
};
|
|
3942
|
-
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" })))));
|
|
3943
4628
|
}
|
|
3944
4629
|
|
|
3945
4630
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
3946
4631
|
function EditorBlockWrapper({ children }) {
|
|
3947
4632
|
const selectedBlockId = useSelectedBlockId();
|
|
3948
|
-
const [mouseInside, setMouseInside] =
|
|
4633
|
+
const [mouseInside, setMouseInside] = React72.useState(false);
|
|
3949
4634
|
const blockId = useCurrentBlockId();
|
|
3950
4635
|
let outline;
|
|
3951
4636
|
if (selectedBlockId === blockId) {
|
|
@@ -3957,9 +4642,9 @@ function EditorBlockWrapper({ children }) {
|
|
|
3957
4642
|
if (selectedBlockId !== blockId) {
|
|
3958
4643
|
return null;
|
|
3959
4644
|
}
|
|
3960
|
-
return /* @__PURE__ */
|
|
4645
|
+
return /* @__PURE__ */ React72__default.default.createElement(TuneMenu, { blockId });
|
|
3961
4646
|
};
|
|
3962
|
-
return /* @__PURE__ */
|
|
4647
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3963
4648
|
material.Box,
|
|
3964
4649
|
{
|
|
3965
4650
|
sx: {
|
|
@@ -3978,14 +4663,131 @@ function EditorBlockWrapper({ children }) {
|
|
|
3978
4663
|
onClick: (ev) => {
|
|
3979
4664
|
setSelectedBlockId(blockId);
|
|
3980
4665
|
ev.stopPropagation();
|
|
3981
|
-
ev.preventDefault();
|
|
3982
4666
|
}
|
|
3983
4667
|
},
|
|
3984
4668
|
renderMenu(),
|
|
3985
4669
|
children
|
|
3986
4670
|
);
|
|
3987
4671
|
}
|
|
3988
|
-
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) {
|
|
3989
4791
|
switch (fontFamily) {
|
|
3990
4792
|
case "MODERN_SANS":
|
|
3991
4793
|
return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
|
|
@@ -4012,7 +4814,7 @@ function getFontFamily7(fontFamily) {
|
|
|
4012
4814
|
}
|
|
4013
4815
|
return void 0;
|
|
4014
4816
|
}
|
|
4015
|
-
function
|
|
4817
|
+
function getPadding12(padding) {
|
|
4016
4818
|
if (!padding) return void 0;
|
|
4017
4819
|
if (typeof padding === "object" && !Array.isArray(padding) && "top" in padding && "right" in padding && "bottom" in padding && "left" in padding) {
|
|
4018
4820
|
return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
|
|
@@ -4054,13 +4856,13 @@ function HeadingEditor({ style, props }) {
|
|
|
4054
4856
|
const isSelected = selectedBlockId === blockId;
|
|
4055
4857
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
4056
4858
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
4057
|
-
const [localText, setLocalText] =
|
|
4859
|
+
const [localText, setLocalText] = React72.useState(textContent);
|
|
4058
4860
|
const rootBlock = document2.root;
|
|
4059
|
-
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ?
|
|
4060
|
-
|
|
4861
|
+
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
4862
|
+
React72.useEffect(() => {
|
|
4061
4863
|
setLocalText(textContent);
|
|
4062
4864
|
}, [textContent]);
|
|
4063
|
-
const fontFamily =
|
|
4865
|
+
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
4064
4866
|
const hStyle = {
|
|
4065
4867
|
color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
|
|
4066
4868
|
backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
|
|
@@ -4069,7 +4871,7 @@ function HeadingEditor({ style, props }) {
|
|
|
4069
4871
|
margin: 0,
|
|
4070
4872
|
fontFamily,
|
|
4071
4873
|
fontSize: getFontSize2(level),
|
|
4072
|
-
padding:
|
|
4874
|
+
padding: getPadding12(style == null ? void 0 : style.padding),
|
|
4073
4875
|
width: "100%",
|
|
4074
4876
|
minHeight: "1em"
|
|
4075
4877
|
};
|
|
@@ -4106,7 +4908,7 @@ function HeadingEditor({ style, props }) {
|
|
|
4106
4908
|
}
|
|
4107
4909
|
};
|
|
4108
4910
|
if (isSelected) {
|
|
4109
|
-
return /* @__PURE__ */
|
|
4911
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4110
4912
|
"textarea",
|
|
4111
4913
|
{
|
|
4112
4914
|
value: localText,
|
|
@@ -4121,14 +4923,310 @@ function HeadingEditor({ style, props }) {
|
|
|
4121
4923
|
}
|
|
4122
4924
|
switch (level) {
|
|
4123
4925
|
case "h1":
|
|
4124
|
-
return /* @__PURE__ */
|
|
4926
|
+
return /* @__PURE__ */ React72__default.default.createElement("h1", { style: hStyle }, textContent);
|
|
4125
4927
|
case "h2":
|
|
4126
|
-
return /* @__PURE__ */
|
|
4928
|
+
return /* @__PURE__ */ React72__default.default.createElement("h2", { style: hStyle }, textContent);
|
|
4127
4929
|
case "h3":
|
|
4128
|
-
return /* @__PURE__ */
|
|
4930
|
+
return /* @__PURE__ */ React72__default.default.createElement("h3", { style: hStyle }, textContent);
|
|
4129
4931
|
}
|
|
4130
4932
|
}
|
|
4131
|
-
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) {
|
|
4132
5230
|
switch (fontFamily) {
|
|
4133
5231
|
case "MODERN_SANS":
|
|
4134
5232
|
return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
|
|
@@ -4155,7 +5253,7 @@ function getFontFamily8(fontFamily) {
|
|
|
4155
5253
|
}
|
|
4156
5254
|
return void 0;
|
|
4157
5255
|
}
|
|
4158
|
-
function
|
|
5256
|
+
function getPadding13(padding) {
|
|
4159
5257
|
if (!padding) return void 0;
|
|
4160
5258
|
if (typeof padding === "object" && !Array.isArray(padding) && "top" in padding && "right" in padding && "bottom" in padding && "left" in padding) {
|
|
4161
5259
|
return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
|
|
@@ -4186,14 +5284,14 @@ function TextEditor({ style, props }) {
|
|
|
4186
5284
|
const document2 = useDocument();
|
|
4187
5285
|
const isSelected = selectedBlockId === blockId;
|
|
4188
5286
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
4189
|
-
const [localText, setLocalText] =
|
|
5287
|
+
const [localText, setLocalText] = React72.useState(textContent);
|
|
4190
5288
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
4191
5289
|
const rootBlock = document2.root;
|
|
4192
|
-
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ?
|
|
4193
|
-
|
|
5290
|
+
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
5291
|
+
React72.useEffect(() => {
|
|
4194
5292
|
setLocalText(textContent);
|
|
4195
5293
|
}, [textContent]);
|
|
4196
|
-
const fontFamily =
|
|
5294
|
+
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
4197
5295
|
const wStyle = {
|
|
4198
5296
|
color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
|
|
4199
5297
|
backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
|
|
@@ -4201,7 +5299,7 @@ function TextEditor({ style, props }) {
|
|
|
4201
5299
|
fontFamily,
|
|
4202
5300
|
fontWeight: (_f = style == null ? void 0 : style.fontWeight) != null ? _f : void 0,
|
|
4203
5301
|
textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
|
|
4204
|
-
padding:
|
|
5302
|
+
padding: getPadding13(style == null ? void 0 : style.padding),
|
|
4205
5303
|
width: "100%",
|
|
4206
5304
|
minHeight: "1em"
|
|
4207
5305
|
};
|
|
@@ -4241,7 +5339,7 @@ function TextEditor({ style, props }) {
|
|
|
4241
5339
|
}
|
|
4242
5340
|
};
|
|
4243
5341
|
if (isSelected && !isMarkdown) {
|
|
4244
|
-
return /* @__PURE__ */
|
|
5342
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4245
5343
|
"textarea",
|
|
4246
5344
|
{
|
|
4247
5345
|
value: localText,
|
|
@@ -4255,36 +5353,36 @@ function TextEditor({ style, props }) {
|
|
|
4255
5353
|
);
|
|
4256
5354
|
}
|
|
4257
5355
|
if (isMarkdown) {
|
|
4258
|
-
return /* @__PURE__ */
|
|
5356
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
|
|
4259
5357
|
}
|
|
4260
|
-
return /* @__PURE__ */
|
|
5358
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, textContent);
|
|
4261
5359
|
}
|
|
4262
5360
|
|
|
4263
5361
|
// src/editor/core.tsx
|
|
4264
5362
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
4265
5363
|
Avatar: {
|
|
4266
5364
|
schema: AvatarPropsSchema,
|
|
4267
|
-
Component: (props) => /* @__PURE__ */
|
|
5365
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
4268
5366
|
},
|
|
4269
5367
|
Button: {
|
|
4270
5368
|
schema: ButtonPropsSchema,
|
|
4271
|
-
Component: (props) => /* @__PURE__ */
|
|
5369
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
4272
5370
|
},
|
|
4273
5371
|
Container: {
|
|
4274
5372
|
schema: container_props_schema_default,
|
|
4275
|
-
Component: (props) => /* @__PURE__ */
|
|
5373
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
4276
5374
|
},
|
|
4277
5375
|
ColumnsContainer: {
|
|
4278
5376
|
schema: columns_container_props_schema_default2,
|
|
4279
|
-
Component: (props) => /* @__PURE__ */
|
|
5377
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
4280
5378
|
},
|
|
4281
5379
|
Heading: {
|
|
4282
5380
|
schema: HeadingPropsSchema,
|
|
4283
|
-
Component: (props) => /* @__PURE__ */
|
|
5381
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
4284
5382
|
},
|
|
4285
5383
|
Html: {
|
|
4286
5384
|
schema: HtmlPropsSchema,
|
|
4287
|
-
Component: (props) => /* @__PURE__ */
|
|
5385
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
4288
5386
|
},
|
|
4289
5387
|
Image: {
|
|
4290
5388
|
schema: ImagePropsSchema,
|
|
@@ -4292,27 +5390,32 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
4292
5390
|
var _a, _b;
|
|
4293
5391
|
const props = __spreadProps(__spreadValues({}, data), {
|
|
4294
5392
|
props: __spreadProps(__spreadValues({}, data.props), {
|
|
4295
|
-
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
|
|
4296
5395
|
})
|
|
4297
5396
|
});
|
|
4298
|
-
return /* @__PURE__ */
|
|
5397
|
+
return /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
4299
5398
|
}
|
|
4300
5399
|
},
|
|
4301
5400
|
Text: {
|
|
4302
5401
|
schema: TextPropsSchema,
|
|
4303
|
-
Component: (props) => /* @__PURE__ */
|
|
5402
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
4304
5403
|
},
|
|
4305
5404
|
EmailLayout: {
|
|
4306
5405
|
schema: email_layout_props_schema_default,
|
|
4307
|
-
Component: (p) => /* @__PURE__ */
|
|
5406
|
+
Component: (p) => /* @__PURE__ */ React72__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
4308
5407
|
},
|
|
4309
5408
|
Spacer: {
|
|
4310
5409
|
schema: SpacerPropsSchema,
|
|
4311
|
-
Component: (props) => /* @__PURE__ */
|
|
5410
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
4312
5411
|
},
|
|
4313
5412
|
Divider: {
|
|
4314
5413
|
schema: DividerPropsSchema,
|
|
4315
|
-
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)))
|
|
4316
5419
|
}
|
|
4317
5420
|
});
|
|
4318
5421
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -4320,15 +5423,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
4320
5423
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
4321
5424
|
|
|
4322
5425
|
// src/editor/editor-block.tsx
|
|
4323
|
-
var EditorBlockContext =
|
|
4324
|
-
var useCurrentBlockId = () =>
|
|
5426
|
+
var EditorBlockContext = React72.createContext(null);
|
|
5427
|
+
var useCurrentBlockId = () => React72.useContext(EditorBlockContext);
|
|
4325
5428
|
function EditorBlock({ id }) {
|
|
4326
5429
|
const document2 = useDocument();
|
|
4327
5430
|
const block = document2[id];
|
|
4328
5431
|
if (!block) {
|
|
4329
5432
|
throw new Error("Could not find block");
|
|
4330
5433
|
}
|
|
4331
|
-
return /* @__PURE__ */
|
|
5434
|
+
return /* @__PURE__ */ React72__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React72__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
4332
5435
|
}
|
|
4333
5436
|
function ToggleInspectorPanelButton() {
|
|
4334
5437
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -4336,20 +5439,20 @@ function ToggleInspectorPanelButton() {
|
|
|
4336
5439
|
toggleInspectorDrawerOpen();
|
|
4337
5440
|
};
|
|
4338
5441
|
if (inspectorDrawerOpen) {
|
|
4339
|
-
return /* @__PURE__ */
|
|
5442
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
4340
5443
|
}
|
|
4341
|
-
return /* @__PURE__ */
|
|
5444
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
4342
5445
|
}
|
|
4343
5446
|
function useIcon() {
|
|
4344
5447
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
4345
5448
|
if (samplesDrawerOpen) {
|
|
4346
|
-
return /* @__PURE__ */
|
|
5449
|
+
return /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
4347
5450
|
}
|
|
4348
|
-
return /* @__PURE__ */
|
|
5451
|
+
return /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
4349
5452
|
}
|
|
4350
5453
|
function ToggleSamplesPanelButton() {
|
|
4351
5454
|
const icon = useIcon();
|
|
4352
|
-
return /* @__PURE__ */
|
|
5455
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
4353
5456
|
}
|
|
4354
5457
|
function formatHtml(html2, spaces = 2) {
|
|
4355
5458
|
try {
|
|
@@ -4397,8 +5500,8 @@ function json(value) {
|
|
|
4397
5500
|
|
|
4398
5501
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
4399
5502
|
function HighlightedCodePanel({ type, value }) {
|
|
4400
|
-
const [code, setCode] =
|
|
4401
|
-
|
|
5503
|
+
const [code, setCode] = React72.useState(null);
|
|
5504
|
+
React72.useEffect(() => {
|
|
4402
5505
|
switch (type) {
|
|
4403
5506
|
case "html":
|
|
4404
5507
|
html(value).then(setCode);
|
|
@@ -4411,7 +5514,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
4411
5514
|
if (code === null) {
|
|
4412
5515
|
return null;
|
|
4413
5516
|
}
|
|
4414
|
-
return /* @__PURE__ */
|
|
5517
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4415
5518
|
"pre",
|
|
4416
5519
|
{
|
|
4417
5520
|
style: {
|
|
@@ -4436,13 +5539,37 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
4436
5539
|
// src/app/email-canvas/html-panel.tsx
|
|
4437
5540
|
function HtmlPanel() {
|
|
4438
5541
|
const document2 = useDocument();
|
|
4439
|
-
const code =
|
|
4440
|
-
return /* @__PURE__ */
|
|
5542
|
+
const code = React72.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
5543
|
+
return /* @__PURE__ */ React72__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
4441
5544
|
}
|
|
4442
5545
|
function JsonPanel() {
|
|
4443
5546
|
const document2 = useDocument();
|
|
4444
|
-
const code =
|
|
4445
|
-
return /* @__PURE__ */
|
|
5547
|
+
const code = React72.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
5548
|
+
return /* @__PURE__ */ React72__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
5549
|
+
}
|
|
5550
|
+
function TextPanel() {
|
|
5551
|
+
const document2 = useDocument();
|
|
5552
|
+
const text = React72.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
5553
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
5554
|
+
"pre",
|
|
5555
|
+
{
|
|
5556
|
+
style: {
|
|
5557
|
+
margin: 0,
|
|
5558
|
+
padding: 16,
|
|
5559
|
+
overflowX: "auto",
|
|
5560
|
+
whiteSpace: "pre-wrap",
|
|
5561
|
+
fontSize: "13px",
|
|
5562
|
+
fontFamily: "monospace",
|
|
5563
|
+
lineHeight: "1.5"
|
|
5564
|
+
},
|
|
5565
|
+
onClick: (ev) => {
|
|
5566
|
+
const s = window.getSelection();
|
|
5567
|
+
if (s === null) return;
|
|
5568
|
+
s.selectAllChildren(ev.currentTarget);
|
|
5569
|
+
}
|
|
5570
|
+
},
|
|
5571
|
+
text
|
|
5572
|
+
);
|
|
4446
5573
|
}
|
|
4447
5574
|
function MainTabsGroup() {
|
|
4448
5575
|
const selectedMainTab = useSelectedMainTab();
|
|
@@ -4452,49 +5579,56 @@ function MainTabsGroup() {
|
|
|
4452
5579
|
case "preview":
|
|
4453
5580
|
case "editor":
|
|
4454
5581
|
case "html":
|
|
5582
|
+
case "text":
|
|
4455
5583
|
setSelectedMainTab(v);
|
|
4456
5584
|
return;
|
|
4457
5585
|
default:
|
|
4458
5586
|
setSelectedMainTab("editor");
|
|
4459
5587
|
}
|
|
4460
5588
|
};
|
|
4461
|
-
return /* @__PURE__ */
|
|
5589
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React72__default.default.createElement(
|
|
4462
5590
|
material.Tab,
|
|
4463
5591
|
{
|
|
4464
5592
|
value: "editor",
|
|
4465
|
-
label: /* @__PURE__ */
|
|
5593
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
4466
5594
|
}
|
|
4467
|
-
), /* @__PURE__ */
|
|
5595
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4468
5596
|
material.Tab,
|
|
4469
5597
|
{
|
|
4470
5598
|
value: "preview",
|
|
4471
|
-
label: /* @__PURE__ */
|
|
5599
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
4472
5600
|
}
|
|
4473
|
-
), /* @__PURE__ */
|
|
5601
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4474
5602
|
material.Tab,
|
|
4475
5603
|
{
|
|
4476
5604
|
value: "html",
|
|
4477
|
-
label: /* @__PURE__ */
|
|
5605
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
5606
|
+
}
|
|
5607
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5608
|
+
material.Tab,
|
|
5609
|
+
{
|
|
5610
|
+
value: "text",
|
|
5611
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
4478
5612
|
}
|
|
4479
|
-
), /* @__PURE__ */
|
|
5613
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4480
5614
|
material.Tab,
|
|
4481
5615
|
{
|
|
4482
5616
|
value: "json",
|
|
4483
|
-
label: /* @__PURE__ */
|
|
5617
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
4484
5618
|
}
|
|
4485
5619
|
));
|
|
4486
5620
|
}
|
|
4487
|
-
var SnackbarContext =
|
|
5621
|
+
var SnackbarContext = React72.createContext(null);
|
|
4488
5622
|
function useSnackbar() {
|
|
4489
|
-
const context =
|
|
5623
|
+
const context = React72.useContext(SnackbarContext);
|
|
4490
5624
|
if (!context) {
|
|
4491
5625
|
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
4492
5626
|
}
|
|
4493
5627
|
return context;
|
|
4494
5628
|
}
|
|
4495
5629
|
function SnackbarProvider({ children }) {
|
|
4496
|
-
const [message, setMessage] =
|
|
4497
|
-
const [duration, setDuration] =
|
|
5630
|
+
const [message, setMessage] = React72.useState(null);
|
|
5631
|
+
const [duration, setDuration] = React72.useState(3e3);
|
|
4498
5632
|
const showMessage = (text, customDuration = 3e3) => {
|
|
4499
5633
|
setMessage(text);
|
|
4500
5634
|
setDuration(customDuration);
|
|
@@ -4502,7 +5636,7 @@ function SnackbarProvider({ children }) {
|
|
|
4502
5636
|
const handleClose = () => {
|
|
4503
5637
|
setMessage(null);
|
|
4504
5638
|
};
|
|
4505
|
-
return /* @__PURE__ */
|
|
5639
|
+
return /* @__PURE__ */ React72__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React72__default.default.createElement(
|
|
4506
5640
|
material.Snackbar,
|
|
4507
5641
|
{
|
|
4508
5642
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4527,10 +5661,10 @@ function SaveTemplateDialog({
|
|
|
4527
5661
|
defaultName = "",
|
|
4528
5662
|
error: externalError = null
|
|
4529
5663
|
}) {
|
|
4530
|
-
const [templateName, setTemplateName] =
|
|
4531
|
-
const [internalError, setInternalError] =
|
|
4532
|
-
const [isSubmitting, setIsSubmitting] =
|
|
4533
|
-
|
|
5664
|
+
const [templateName, setTemplateName] = React72.useState(defaultName);
|
|
5665
|
+
const [internalError, setInternalError] = React72.useState("");
|
|
5666
|
+
const [isSubmitting, setIsSubmitting] = React72.useState(false);
|
|
5667
|
+
React72.useEffect(() => {
|
|
4534
5668
|
if (open) {
|
|
4535
5669
|
setTemplateName(defaultName);
|
|
4536
5670
|
setInternalError("");
|
|
@@ -4578,7 +5712,7 @@ function SaveTemplateDialog({
|
|
|
4578
5712
|
setInternalError("");
|
|
4579
5713
|
onClose();
|
|
4580
5714
|
};
|
|
4581
|
-
return /* @__PURE__ */
|
|
5715
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4582
5716
|
material.Dialog,
|
|
4583
5717
|
{
|
|
4584
5718
|
open,
|
|
@@ -4586,8 +5720,8 @@ function SaveTemplateDialog({
|
|
|
4586
5720
|
maxWidth: "sm",
|
|
4587
5721
|
fullWidth: true
|
|
4588
5722
|
},
|
|
4589
|
-
/* @__PURE__ */
|
|
4590
|
-
/* @__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(
|
|
4591
5725
|
material.TextField,
|
|
4592
5726
|
{
|
|
4593
5727
|
autoFocus: true,
|
|
@@ -4609,7 +5743,7 @@ function SaveTemplateDialog({
|
|
|
4609
5743
|
disabled: isSubmitting
|
|
4610
5744
|
}
|
|
4611
5745
|
))),
|
|
4612
|
-
/* @__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(
|
|
4613
5747
|
material.Button,
|
|
4614
5748
|
{
|
|
4615
5749
|
onClick: handleSave,
|
|
@@ -4626,7 +5760,7 @@ function SaveTemplateDialog({
|
|
|
4626
5760
|
function SaveButton({ loadTemplates, saveAs }) {
|
|
4627
5761
|
const { saveTemplate, currentTemplateId, setCurrentTemplate } = useEmailEditor();
|
|
4628
5762
|
const { showMessage } = useSnackbar();
|
|
4629
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
5763
|
+
const [saveDialogOpen, setSaveDialogOpen] = React72.useState(false);
|
|
4630
5764
|
const document2 = useDocument();
|
|
4631
5765
|
const handleSave = () => __async(null, null, function* () {
|
|
4632
5766
|
try {
|
|
@@ -4664,7 +5798,7 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4664
5798
|
return false;
|
|
4665
5799
|
}
|
|
4666
5800
|
});
|
|
4667
|
-
return /* @__PURE__ */
|
|
5801
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
4668
5802
|
material.IconButton,
|
|
4669
5803
|
{
|
|
4670
5804
|
onClick: handleSave,
|
|
@@ -4675,8 +5809,8 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4675
5809
|
}
|
|
4676
5810
|
}
|
|
4677
5811
|
},
|
|
4678
|
-
/* @__PURE__ */
|
|
4679
|
-
), /* @__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(
|
|
4680
5814
|
SaveTemplateDialog,
|
|
4681
5815
|
{
|
|
4682
5816
|
open: saveDialogOpen,
|
|
@@ -4689,9 +5823,9 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4689
5823
|
function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
4690
5824
|
const { setCurrentTemplate, loadTemplate } = useEmailEditor();
|
|
4691
5825
|
const { showMessage } = useSnackbar();
|
|
4692
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
4693
|
-
const [templates, setTemplates] =
|
|
4694
|
-
const [nameError, setNameError] =
|
|
5826
|
+
const [saveDialogOpen, setSaveDialogOpen] = React72.useState(false);
|
|
5827
|
+
const [templates, setTemplates] = React72.useState([]);
|
|
5828
|
+
const [nameError, setNameError] = React72.useState(null);
|
|
4695
5829
|
const fetchTemplates = () => __async(null, null, function* () {
|
|
4696
5830
|
if (loadTemplates) {
|
|
4697
5831
|
try {
|
|
@@ -4746,7 +5880,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4746
5880
|
}
|
|
4747
5881
|
return false;
|
|
4748
5882
|
});
|
|
4749
|
-
return /* @__PURE__ */
|
|
5883
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
4750
5884
|
material.IconButton,
|
|
4751
5885
|
{
|
|
4752
5886
|
onClick: handleNewTemplate,
|
|
@@ -4757,8 +5891,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4757
5891
|
}
|
|
4758
5892
|
}
|
|
4759
5893
|
},
|
|
4760
|
-
/* @__PURE__ */
|
|
4761
|
-
), /* @__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(
|
|
4762
5896
|
SaveTemplateDialog,
|
|
4763
5897
|
{
|
|
4764
5898
|
open: saveDialogOpen,
|
|
@@ -4775,7 +5909,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4775
5909
|
}
|
|
4776
5910
|
|
|
4777
5911
|
// src/app/email-canvas/index.tsx
|
|
4778
|
-
function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
5912
|
+
function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
|
|
4779
5913
|
const document2 = useDocument();
|
|
4780
5914
|
const selectedMainTab = useSelectedMainTab();
|
|
4781
5915
|
const selectedScreenSize = useSelectedScreenSize();
|
|
@@ -4805,17 +5939,19 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
|
4805
5939
|
const renderMainPanel = () => {
|
|
4806
5940
|
switch (selectedMainTab) {
|
|
4807
5941
|
case "editor":
|
|
4808
|
-
return /* @__PURE__ */
|
|
5942
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React72__default.default.createElement(EditorBlock, { id: "root" }));
|
|
4809
5943
|
case "preview":
|
|
4810
|
-
return /* @__PURE__ */
|
|
5944
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React72__default.default.createElement(Reader, { document: document2, rootBlockId: "root" }));
|
|
4811
5945
|
case "html":
|
|
4812
|
-
return /* @__PURE__ */
|
|
5946
|
+
return /* @__PURE__ */ React72__default.default.createElement(HtmlPanel, null);
|
|
5947
|
+
case "text":
|
|
5948
|
+
return /* @__PURE__ */ React72__default.default.createElement(TextPanel, null);
|
|
4813
5949
|
case "json":
|
|
4814
|
-
return /* @__PURE__ */
|
|
5950
|
+
return /* @__PURE__ */ React72__default.default.createElement(JsonPanel, null);
|
|
4815
5951
|
}
|
|
4816
5952
|
};
|
|
4817
5953
|
const showSaveButtons = persistenceEnabled;
|
|
4818
|
-
return /* @__PURE__ */
|
|
5954
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
4819
5955
|
material.Stack,
|
|
4820
5956
|
{
|
|
4821
5957
|
sx: {
|
|
@@ -4832,10 +5968,10 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
|
4832
5968
|
justifyContent: "space-between",
|
|
4833
5969
|
alignItems: "center"
|
|
4834
5970
|
},
|
|
4835
|
-
/* @__PURE__ */
|
|
4836
|
-
/* @__PURE__ */
|
|
4837
|
-
/* @__PURE__ */
|
|
4838
|
-
), /* @__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: {
|
|
4839
5975
|
paddingBottom: "50px",
|
|
4840
5976
|
minWidth: 370
|
|
4841
5977
|
} }, renderMainPanel()));
|
|
@@ -4874,7 +6010,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
4874
6010
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
4875
6011
|
});
|
|
4876
6012
|
}
|
|
4877
|
-
var EmailEditorInternal =
|
|
6013
|
+
var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
4878
6014
|
const {
|
|
4879
6015
|
drawerEnterDuration = 225,
|
|
4880
6016
|
drawerExitDuration = 225,
|
|
@@ -4894,10 +6030,10 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4894
6030
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
4895
6031
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
4896
6032
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
4897
|
-
const onChangeRef =
|
|
6033
|
+
const onChangeRef = React72.useRef(onChange);
|
|
4898
6034
|
onChangeRef.current = onChange;
|
|
4899
|
-
const prevDocJsonRef =
|
|
4900
|
-
|
|
6035
|
+
const prevDocJsonRef = React72.useRef("");
|
|
6036
|
+
React72.useEffect(() => {
|
|
4901
6037
|
var _a;
|
|
4902
6038
|
const docJson = JSON.stringify(currentDocument);
|
|
4903
6039
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -4905,7 +6041,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4905
6041
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
4906
6042
|
}
|
|
4907
6043
|
}, [currentDocument]);
|
|
4908
|
-
|
|
6044
|
+
React72.useImperativeHandle(ref, () => ({
|
|
4909
6045
|
saveTemplate: () => {
|
|
4910
6046
|
return saveTemplate();
|
|
4911
6047
|
},
|
|
@@ -4917,7 +6053,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4917
6053
|
return getDocument();
|
|
4918
6054
|
}
|
|
4919
6055
|
}));
|
|
4920
|
-
return /* @__PURE__ */
|
|
6056
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React72__default.default.createElement(
|
|
4921
6057
|
InspectorDrawer,
|
|
4922
6058
|
{
|
|
4923
6059
|
enterDuration: drawerEnterDuration,
|
|
@@ -4925,7 +6061,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4925
6061
|
deleteTemplate,
|
|
4926
6062
|
copyTemplate
|
|
4927
6063
|
}
|
|
4928
|
-
), /* @__PURE__ */
|
|
6064
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4929
6065
|
SamplesDrawer,
|
|
4930
6066
|
{
|
|
4931
6067
|
enterDuration: drawerEnterDuration,
|
|
@@ -4937,7 +6073,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4937
6073
|
currentTemplateId,
|
|
4938
6074
|
deleteTemplate
|
|
4939
6075
|
}
|
|
4940
|
-
), /* @__PURE__ */
|
|
6076
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4941
6077
|
material.Stack,
|
|
4942
6078
|
{
|
|
4943
6079
|
sx: {
|
|
@@ -4946,10 +6082,10 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4946
6082
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
4947
6083
|
}
|
|
4948
6084
|
},
|
|
4949
|
-
/* @__PURE__ */
|
|
6085
|
+
/* @__PURE__ */ React72__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
4950
6086
|
));
|
|
4951
6087
|
});
|
|
4952
|
-
var EmailEditor =
|
|
6088
|
+
var EmailEditor = React72.forwardRef((props, ref) => {
|
|
4953
6089
|
const {
|
|
4954
6090
|
initialTemplate: initialTemplateProp,
|
|
4955
6091
|
initialTemplateId,
|
|
@@ -4969,19 +6105,19 @@ var EmailEditor = React81.forwardRef((props, ref) => {
|
|
|
4969
6105
|
saveAs,
|
|
4970
6106
|
theme
|
|
4971
6107
|
} = props;
|
|
4972
|
-
const resolvedTemplate =
|
|
6108
|
+
const resolvedTemplate = React72.useMemo(
|
|
4973
6109
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
4974
6110
|
[initialTemplateProp]
|
|
4975
6111
|
);
|
|
4976
|
-
const prevTemplateRef =
|
|
6112
|
+
const prevTemplateRef = React72.useRef(void 0);
|
|
4977
6113
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
4978
6114
|
prevTemplateRef.current = resolvedTemplate;
|
|
4979
6115
|
resetDocument(resolvedTemplate);
|
|
4980
6116
|
}
|
|
4981
|
-
|
|
6117
|
+
React72.useEffect(() => {
|
|
4982
6118
|
setPersistenceEnabled(persistenceEnabled);
|
|
4983
6119
|
}, [persistenceEnabled]);
|
|
4984
|
-
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(
|
|
4985
6121
|
EmailEditorProvider,
|
|
4986
6122
|
{
|
|
4987
6123
|
initialTemplate: resolvedTemplate,
|
|
@@ -4990,7 +6126,7 @@ var EmailEditor = React81.forwardRef((props, ref) => {
|
|
|
4990
6126
|
onSave,
|
|
4991
6127
|
onChange
|
|
4992
6128
|
},
|
|
4993
|
-
/* @__PURE__ */
|
|
6129
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
4994
6130
|
EmailEditorInternal,
|
|
4995
6131
|
{
|
|
4996
6132
|
ref,
|
|
@@ -5053,6 +6189,10 @@ exports.Reader = Reader;
|
|
|
5053
6189
|
exports.ReaderBlock = ReaderBlock;
|
|
5054
6190
|
exports.ReaderBlockSchema = ReaderBlockSchema;
|
|
5055
6191
|
exports.ReaderDocumentSchema = ReaderDocumentSchema;
|
|
6192
|
+
exports.Signature = signature_default;
|
|
6193
|
+
exports.SignatureProps = SignatureProps;
|
|
6194
|
+
exports.SignaturePropsDefaults = SignaturePropsDefaults;
|
|
6195
|
+
exports.SignaturePropsSchema = SignaturePropsSchema;
|
|
5056
6196
|
exports.Spacer = spacer_default;
|
|
5057
6197
|
exports.SpacerProps = SpacerProps;
|
|
5058
6198
|
exports.SpacerPropsDefaults = SpacerPropsDefaults;
|
|
@@ -5066,6 +6206,7 @@ exports.buildBlockConfigurationDictionary = buildBlockConfigurationDictionary;
|
|
|
5066
6206
|
exports.buildBlockConfigurationSchema = buildBlockConfigurationSchema;
|
|
5067
6207
|
exports.htmlToEditorConfig = htmlToEditorConfig;
|
|
5068
6208
|
exports.renderToStaticMarkup = renderToStaticMarkup;
|
|
6209
|
+
exports.renderToText = renderToText;
|
|
5069
6210
|
exports.theme = theme_default;
|
|
5070
6211
|
exports.useEmailEditor = useEmailEditor;
|
|
5071
6212
|
//# sourceMappingURL=index.cjs.map
|