@kontakto/email-template-editor 1.3.2 → 1.4.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 +561 -395
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -2
- package/dist/index.d.ts +7 -2
- package/dist/index.js +473 -308
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var DOMPurify = require('dompurify');
|
|
4
4
|
var marked = require('marked');
|
|
5
|
-
var
|
|
5
|
+
var React82 = 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 React82__default = /*#__PURE__*/_interopDefault(React82);
|
|
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 = React82.useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
172
|
+
return /* @__PURE__ */ React82__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__ */ React82__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
249
249
|
}
|
|
250
|
-
return /* @__PURE__ */
|
|
250
|
+
return /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React82__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("span", null, text), /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React82__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React82__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React82__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React82__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__ */ React82__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__ */ React82__default.default.createElement("div", { style: wStyle });
|
|
593
593
|
}
|
|
594
|
-
return /* @__PURE__ */
|
|
594
|
+
return /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("div", { style: st }, /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("h1", { style: hStyle }, text);
|
|
719
719
|
case "h2":
|
|
720
|
-
return /* @__PURE__ */
|
|
720
|
+
return /* @__PURE__ */ React82__default.default.createElement("h2", { style: hStyle }, text);
|
|
721
721
|
case "h3":
|
|
722
|
-
return /* @__PURE__ */
|
|
722
|
+
return /* @__PURE__ */ React82__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__ */ React82__default.default.createElement("div", { style: cssStyle });
|
|
805
805
|
}
|
|
806
|
-
return /* @__PURE__ */
|
|
806
|
+
return /* @__PURE__ */ React82__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__ */ React82__default.default.createElement(
|
|
843
843
|
"img",
|
|
844
844
|
{
|
|
845
845
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -859,9 +859,9 @@ function Image({ style, props }) {
|
|
|
859
859
|
}
|
|
860
860
|
);
|
|
861
861
|
if (!linkHref) {
|
|
862
|
-
return /* @__PURE__ */
|
|
862
|
+
return /* @__PURE__ */ React82__default.default.createElement("div", { style: sectionStyle }, imageElement);
|
|
863
863
|
}
|
|
864
|
-
return /* @__PURE__ */
|
|
864
|
+
return /* @__PURE__ */ React82__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React82__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
865
865
|
}
|
|
866
866
|
var image_default = Image;
|
|
867
867
|
var SpacerPropsSchema = zod.z.object({
|
|
@@ -878,13 +878,13 @@ function Spacer({ props }) {
|
|
|
878
878
|
const style = {
|
|
879
879
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
880
880
|
};
|
|
881
|
-
return /* @__PURE__ */
|
|
881
|
+
return /* @__PURE__ */ React82__default.default.createElement("div", { style });
|
|
882
882
|
}
|
|
883
883
|
var spacer_default = Spacer;
|
|
884
884
|
function buildBlockComponent(blocks) {
|
|
885
885
|
return function BlockComponent({ type, data }) {
|
|
886
886
|
const Component = blocks[type].Component;
|
|
887
|
-
return /* @__PURE__ */
|
|
887
|
+
return /* @__PURE__ */ React82__default.default.createElement(Component, __spreadValues({}, data));
|
|
888
888
|
};
|
|
889
889
|
}
|
|
890
890
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -921,9 +921,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
921
921
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
922
922
|
let cols = void 0;
|
|
923
923
|
if (columns) {
|
|
924
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
924
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React82__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
925
925
|
}
|
|
926
|
-
return /* @__PURE__ */
|
|
926
|
+
return /* @__PURE__ */ React82__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
927
927
|
}
|
|
928
928
|
var ContainerPropsSchema2 = zod.z.object({
|
|
929
929
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -934,7 +934,7 @@ var ContainerPropsSchema2 = zod.z.object({
|
|
|
934
934
|
function ContainerReader({ style, props }) {
|
|
935
935
|
var _a;
|
|
936
936
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
937
|
-
return /* @__PURE__ */
|
|
937
|
+
return /* @__PURE__ */ React82__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React82__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
938
938
|
}
|
|
939
939
|
var COLOR_SCHEMA8 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
940
940
|
var FONT_FAMILY_SCHEMA5 = zod.z.enum([
|
|
@@ -989,7 +989,7 @@ function getBorder2({ borderColor }) {
|
|
|
989
989
|
function EmailLayoutReader(props) {
|
|
990
990
|
var _a, _b, _c, _d, _e;
|
|
991
991
|
const childrenIds = (_a = props.childrenIds) != null ? _a : [];
|
|
992
|
-
return /* @__PURE__ */
|
|
992
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
993
993
|
"div",
|
|
994
994
|
{
|
|
995
995
|
style: {
|
|
@@ -1006,7 +1006,7 @@ function EmailLayoutReader(props) {
|
|
|
1006
1006
|
width: "100%"
|
|
1007
1007
|
}
|
|
1008
1008
|
},
|
|
1009
|
-
/* @__PURE__ */
|
|
1009
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
1010
1010
|
"table",
|
|
1011
1011
|
{
|
|
1012
1012
|
align: "center",
|
|
@@ -1023,19 +1023,19 @@ function EmailLayoutReader(props) {
|
|
|
1023
1023
|
cellPadding: "0",
|
|
1024
1024
|
border: 0
|
|
1025
1025
|
},
|
|
1026
|
-
/* @__PURE__ */
|
|
1026
|
+
/* @__PURE__ */ React82__default.default.createElement("tbody", null, /* @__PURE__ */ React82__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React82__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React82__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1027
1027
|
)
|
|
1028
1028
|
);
|
|
1029
1029
|
}
|
|
1030
1030
|
|
|
1031
1031
|
// src/email-builder/reader/core.tsx
|
|
1032
|
-
var ReaderContext =
|
|
1032
|
+
var ReaderContext = React82.createContext({});
|
|
1033
1033
|
function useReaderDocument() {
|
|
1034
|
-
return
|
|
1034
|
+
return React82.useContext(ReaderContext);
|
|
1035
1035
|
}
|
|
1036
1036
|
function ReaderBlock({ id }) {
|
|
1037
1037
|
const document2 = useReaderDocument();
|
|
1038
|
-
return document2[id] ? /* @__PURE__ */
|
|
1038
|
+
return document2[id] ? /* @__PURE__ */ React82__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1039
1039
|
}
|
|
1040
1040
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1041
1041
|
ColumnsContainer: {
|
|
@@ -1088,15 +1088,149 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1088
1088
|
var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
|
|
1089
1089
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1090
1090
|
function Reader({ document: document2, rootBlockId }) {
|
|
1091
|
-
return /* @__PURE__ */
|
|
1091
|
+
return /* @__PURE__ */ React82__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React82__default.default.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1092
1092
|
}
|
|
1093
1093
|
|
|
1094
1094
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1095
1095
|
function renderToStaticMarkup(document2, { rootBlockId }) {
|
|
1096
1096
|
return "<!DOCTYPE html>" + server.renderToStaticMarkup(
|
|
1097
|
-
/* @__PURE__ */
|
|
1097
|
+
/* @__PURE__ */ React82__default.default.createElement("html", null, /* @__PURE__ */ React82__default.default.createElement("body", null, /* @__PURE__ */ React82__default.default.createElement(Reader, { document: document2, rootBlockId })))
|
|
1098
1098
|
);
|
|
1099
1099
|
}
|
|
1100
|
+
|
|
1101
|
+
// src/email-builder/renderers/render-to-text.ts
|
|
1102
|
+
function renderToText(document2, { rootBlockId }) {
|
|
1103
|
+
const lines = [];
|
|
1104
|
+
renderBlock(document2, rootBlockId, lines);
|
|
1105
|
+
return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
|
|
1106
|
+
}
|
|
1107
|
+
function renderBlock(document2, blockId, lines) {
|
|
1108
|
+
var _a;
|
|
1109
|
+
const block = document2[blockId];
|
|
1110
|
+
if (!block) return;
|
|
1111
|
+
const { type, data } = block;
|
|
1112
|
+
switch (type) {
|
|
1113
|
+
case "EmailLayout":
|
|
1114
|
+
renderChildren(document2, data == null ? void 0 : data.childrenIds, lines);
|
|
1115
|
+
break;
|
|
1116
|
+
case "Container":
|
|
1117
|
+
renderChildren(document2, (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.childrenIds, lines);
|
|
1118
|
+
break;
|
|
1119
|
+
case "ColumnsContainer":
|
|
1120
|
+
renderColumnsContainer(document2, data, lines);
|
|
1121
|
+
break;
|
|
1122
|
+
case "Text":
|
|
1123
|
+
renderText(data, lines);
|
|
1124
|
+
break;
|
|
1125
|
+
case "Heading":
|
|
1126
|
+
renderHeading(data, lines);
|
|
1127
|
+
break;
|
|
1128
|
+
case "Button":
|
|
1129
|
+
renderButton(data, lines);
|
|
1130
|
+
break;
|
|
1131
|
+
case "Image":
|
|
1132
|
+
renderImage(data, lines);
|
|
1133
|
+
break;
|
|
1134
|
+
case "Avatar":
|
|
1135
|
+
renderAvatar(data, lines);
|
|
1136
|
+
break;
|
|
1137
|
+
case "Html":
|
|
1138
|
+
renderHtml(data, lines);
|
|
1139
|
+
break;
|
|
1140
|
+
case "Divider":
|
|
1141
|
+
lines.push("");
|
|
1142
|
+
lines.push("---");
|
|
1143
|
+
lines.push("");
|
|
1144
|
+
break;
|
|
1145
|
+
case "Spacer":
|
|
1146
|
+
lines.push("");
|
|
1147
|
+
break;
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
1150
|
+
function renderChildren(document2, childrenIds, lines) {
|
|
1151
|
+
if (!childrenIds) return;
|
|
1152
|
+
for (const childId of childrenIds) {
|
|
1153
|
+
renderBlock(document2, childId, lines);
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
function renderColumnsContainer(document2, data, lines) {
|
|
1157
|
+
var _a, _b;
|
|
1158
|
+
const columns = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.columns;
|
|
1159
|
+
if (!columns) return;
|
|
1160
|
+
for (const col of columns) {
|
|
1161
|
+
if ((_b = col == null ? void 0 : col.childrenIds) == null ? void 0 : _b.length) {
|
|
1162
|
+
renderChildren(document2, col.childrenIds, lines);
|
|
1163
|
+
}
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
function renderText(data, lines) {
|
|
1167
|
+
var _a, _b, _c;
|
|
1168
|
+
const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
|
|
1169
|
+
if (!text) return;
|
|
1170
|
+
if ((_c = data == null ? void 0 : data.props) == null ? void 0 : _c.markdown) {
|
|
1171
|
+
lines.push(text);
|
|
1172
|
+
} else {
|
|
1173
|
+
lines.push(text);
|
|
1174
|
+
}
|
|
1175
|
+
lines.push("");
|
|
1176
|
+
}
|
|
1177
|
+
function renderHeading(data, lines) {
|
|
1178
|
+
var _a, _b, _c, _d;
|
|
1179
|
+
const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
|
|
1180
|
+
if (!text) return;
|
|
1181
|
+
const level = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.level) != null ? _d : "h2";
|
|
1182
|
+
const prefix = level === "h1" ? "# " : level === "h2" ? "## " : "### ";
|
|
1183
|
+
lines.push(prefix + text);
|
|
1184
|
+
lines.push("");
|
|
1185
|
+
}
|
|
1186
|
+
function renderButton(data, lines) {
|
|
1187
|
+
var _a, _b, _c, _d;
|
|
1188
|
+
const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
|
|
1189
|
+
const url = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.url) != null ? _d : "";
|
|
1190
|
+
if (text && url) {
|
|
1191
|
+
lines.push(`${text}: ${url}`);
|
|
1192
|
+
} else if (text) {
|
|
1193
|
+
lines.push(text);
|
|
1194
|
+
} else if (url) {
|
|
1195
|
+
lines.push(url);
|
|
1196
|
+
}
|
|
1197
|
+
lines.push("");
|
|
1198
|
+
}
|
|
1199
|
+
function renderImage(data, lines) {
|
|
1200
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1201
|
+
const alt = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.alt) != null ? _b : "";
|
|
1202
|
+
const url = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.url) != null ? _d : "";
|
|
1203
|
+
const linkHref = (_f = (_e = data == null ? void 0 : data.props) == null ? void 0 : _e.linkHref) != null ? _f : "";
|
|
1204
|
+
if (alt && linkHref) {
|
|
1205
|
+
lines.push(`[${alt}] ${linkHref}`);
|
|
1206
|
+
} else if (alt) {
|
|
1207
|
+
lines.push(`[${alt}]`);
|
|
1208
|
+
} else if (url) {
|
|
1209
|
+
lines.push(`[Image: ${url}]`);
|
|
1210
|
+
}
|
|
1211
|
+
lines.push("");
|
|
1212
|
+
}
|
|
1213
|
+
function renderAvatar(data, lines) {
|
|
1214
|
+
var _a, _b;
|
|
1215
|
+
const alt = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.alt) != null ? _b : "";
|
|
1216
|
+
if (alt) {
|
|
1217
|
+
lines.push(`[${alt}]`);
|
|
1218
|
+
lines.push("");
|
|
1219
|
+
}
|
|
1220
|
+
}
|
|
1221
|
+
function renderHtml(data, lines) {
|
|
1222
|
+
var _a, _b;
|
|
1223
|
+
const contents = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.contents) != null ? _b : "";
|
|
1224
|
+
if (!contents) return;
|
|
1225
|
+
const text = stripHtml(contents);
|
|
1226
|
+
if (text) {
|
|
1227
|
+
lines.push(text);
|
|
1228
|
+
lines.push("");
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
function stripHtml(html2) {
|
|
1232
|
+
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();
|
|
1233
|
+
}
|
|
1100
1234
|
var BRAND_NAVY = "#212443";
|
|
1101
1235
|
var BRAND_BLUE = "#0079CC";
|
|
1102
1236
|
var BRAND_GREEN = "#1F8466";
|
|
@@ -1701,19 +1835,19 @@ function setSelectedScreenSize(selectedScreenSize) {
|
|
|
1701
1835
|
function setPersistenceEnabled(persistenceEnabled) {
|
|
1702
1836
|
return editorStateStore.setState({ persistenceEnabled });
|
|
1703
1837
|
}
|
|
1704
|
-
var EmailEditorContext =
|
|
1838
|
+
var EmailEditorContext = React82.createContext(null);
|
|
1705
1839
|
var EmailEditorProvider = ({
|
|
1706
1840
|
children,
|
|
1707
1841
|
initialTemplateId = null,
|
|
1708
1842
|
initialTemplateName = null,
|
|
1709
1843
|
onSave
|
|
1710
1844
|
}) => {
|
|
1711
|
-
const [currentTemplateId, setCurrentTemplateId] =
|
|
1712
|
-
const [currentTemplateName, setCurrentTemplateName] =
|
|
1713
|
-
const saveListenersRef =
|
|
1714
|
-
const onSaveRef =
|
|
1845
|
+
const [currentTemplateId, setCurrentTemplateId] = React82.useState(initialTemplateId);
|
|
1846
|
+
const [currentTemplateName, setCurrentTemplateName] = React82.useState(initialTemplateName);
|
|
1847
|
+
const saveListenersRef = React82.useRef([]);
|
|
1848
|
+
const onSaveRef = React82.useRef(onSave);
|
|
1715
1849
|
onSaveRef.current = onSave;
|
|
1716
|
-
const saveTemplate =
|
|
1850
|
+
const saveTemplate = React82.useCallback(() => {
|
|
1717
1851
|
const currentDoc = getDocument();
|
|
1718
1852
|
saveListenersRef.current.forEach((listener) => listener(currentDoc));
|
|
1719
1853
|
if (onSaveRef.current) {
|
|
@@ -1721,7 +1855,7 @@ var EmailEditorProvider = ({
|
|
|
1721
1855
|
}
|
|
1722
1856
|
return currentDoc;
|
|
1723
1857
|
}, []);
|
|
1724
|
-
const loadTemplate =
|
|
1858
|
+
const loadTemplate = React82.useCallback((newTemplate, templateId, templateName) => {
|
|
1725
1859
|
if (templateId !== void 0) {
|
|
1726
1860
|
setCurrentTemplateId(templateId);
|
|
1727
1861
|
}
|
|
@@ -1729,17 +1863,17 @@ var EmailEditorProvider = ({
|
|
|
1729
1863
|
setCurrentTemplateName(templateName);
|
|
1730
1864
|
}
|
|
1731
1865
|
}, []);
|
|
1732
|
-
const setCurrentTemplate =
|
|
1866
|
+
const setCurrentTemplate = React82.useCallback((templateId, templateName) => {
|
|
1733
1867
|
setCurrentTemplateId(templateId);
|
|
1734
1868
|
setCurrentTemplateName(templateName);
|
|
1735
1869
|
}, []);
|
|
1736
|
-
const registerSaveListener =
|
|
1870
|
+
const registerSaveListener = React82.useCallback((callback) => {
|
|
1737
1871
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
1738
1872
|
return () => {
|
|
1739
1873
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
1740
1874
|
};
|
|
1741
1875
|
}, []);
|
|
1742
|
-
const value =
|
|
1876
|
+
const value = React82.useMemo(() => ({
|
|
1743
1877
|
currentTemplateId,
|
|
1744
1878
|
currentTemplateName,
|
|
1745
1879
|
saveTemplate,
|
|
@@ -1747,24 +1881,24 @@ var EmailEditorProvider = ({
|
|
|
1747
1881
|
registerSaveListener,
|
|
1748
1882
|
setCurrentTemplate
|
|
1749
1883
|
}), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
|
|
1750
|
-
return /* @__PURE__ */
|
|
1884
|
+
return /* @__PURE__ */ React82__default.default.createElement(EmailEditorContext.Provider, { value }, children);
|
|
1751
1885
|
};
|
|
1752
1886
|
var useEmailEditor = () => {
|
|
1753
|
-
const context =
|
|
1887
|
+
const context = React82.useContext(EmailEditorContext);
|
|
1754
1888
|
if (!context) {
|
|
1755
1889
|
throw new Error("useEmailEditor must be used within an EmailEditorProvider");
|
|
1756
1890
|
}
|
|
1757
1891
|
return context;
|
|
1758
1892
|
};
|
|
1759
1893
|
function BaseSidebarPanel({ title, children }) {
|
|
1760
|
-
return /* @__PURE__ */
|
|
1894
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React82__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React82__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
|
|
1761
1895
|
}
|
|
1762
1896
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
1763
|
-
const [value, setValue] =
|
|
1764
|
-
|
|
1897
|
+
const [value, setValue] = React82.useState(defaultValue);
|
|
1898
|
+
React82.useEffect(() => {
|
|
1765
1899
|
setValue(defaultValue);
|
|
1766
1900
|
}, [defaultValue]);
|
|
1767
|
-
return /* @__PURE__ */
|
|
1901
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React82__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React82__default.default.createElement(
|
|
1768
1902
|
material.ToggleButtonGroup,
|
|
1769
1903
|
{
|
|
1770
1904
|
exclusive: true,
|
|
@@ -1784,7 +1918,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
1784
1918
|
}
|
|
1785
1919
|
function RawSliderInput(_a) {
|
|
1786
1920
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
1787
|
-
return /* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React82__default.default.createElement(
|
|
1788
1922
|
material.Slider,
|
|
1789
1923
|
__spreadProps(__spreadValues({}, props), {
|
|
1790
1924
|
value,
|
|
@@ -1795,14 +1929,14 @@ function RawSliderInput(_a) {
|
|
|
1795
1929
|
setValue(value2);
|
|
1796
1930
|
}
|
|
1797
1931
|
})
|
|
1798
|
-
), /* @__PURE__ */
|
|
1932
|
+
), /* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React82__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
1799
1933
|
}
|
|
1800
1934
|
|
|
1801
1935
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
1802
1936
|
function SliderInput(_a) {
|
|
1803
1937
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
1804
|
-
const [value, setValue] =
|
|
1805
|
-
return /* @__PURE__ */
|
|
1938
|
+
const [value, setValue] = React82.useState(defaultValue);
|
|
1939
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React82__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React82__default.default.createElement(
|
|
1806
1940
|
RawSliderInput,
|
|
1807
1941
|
__spreadValues({
|
|
1808
1942
|
value,
|
|
@@ -1814,12 +1948,12 @@ function SliderInput(_a) {
|
|
|
1814
1948
|
));
|
|
1815
1949
|
}
|
|
1816
1950
|
function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
|
|
1817
|
-
const [value, setValue] =
|
|
1951
|
+
const [value, setValue] = React82.useState(defaultValue);
|
|
1818
1952
|
const isMultiline = typeof rows === "number" && rows > 1;
|
|
1819
|
-
|
|
1953
|
+
React82.useEffect(() => {
|
|
1820
1954
|
setValue(defaultValue);
|
|
1821
1955
|
}, [defaultValue]);
|
|
1822
|
-
return /* @__PURE__ */
|
|
1956
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
1823
1957
|
material.TextField,
|
|
1824
1958
|
{
|
|
1825
1959
|
fullWidth: true,
|
|
@@ -1844,8 +1978,8 @@ var TILE_BUTTON = {
|
|
|
1844
1978
|
height: 24
|
|
1845
1979
|
};
|
|
1846
1980
|
function Swatch({ paletteColors, value, onChange }) {
|
|
1847
|
-
const
|
|
1848
|
-
return /* @__PURE__ */
|
|
1981
|
+
const renderButton2 = (colorValue) => {
|
|
1982
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
1849
1983
|
material.Button,
|
|
1850
1984
|
{
|
|
1851
1985
|
key: colorValue,
|
|
@@ -1864,7 +1998,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
1864
1998
|
}
|
|
1865
1999
|
);
|
|
1866
2000
|
};
|
|
1867
|
-
return /* @__PURE__ */
|
|
2001
|
+
return /* @__PURE__ */ React82__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
2002
|
}
|
|
1869
2003
|
|
|
1870
2004
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -1931,7 +2065,7 @@ var SX = {
|
|
|
1931
2065
|
}
|
|
1932
2066
|
};
|
|
1933
2067
|
function Picker({ value, onChange }) {
|
|
1934
|
-
return /* @__PURE__ */
|
|
2068
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React82__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React82__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React82__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React82__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
|
|
1935
2069
|
}
|
|
1936
2070
|
|
|
1937
2071
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -1944,8 +2078,8 @@ var BUTTON_SX = {
|
|
|
1944
2078
|
bgcolor: "#FFFFFF"
|
|
1945
2079
|
};
|
|
1946
2080
|
function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
1947
|
-
const [anchorEl, setAnchorEl] =
|
|
1948
|
-
const [value, setValue] =
|
|
2081
|
+
const [anchorEl, setAnchorEl] = React82.useState(null);
|
|
2082
|
+
const [value, setValue] = React82.useState(defaultValue);
|
|
1949
2083
|
const handleClickOpen = (event) => {
|
|
1950
2084
|
setAnchorEl(event.currentTarget);
|
|
1951
2085
|
};
|
|
@@ -1956,7 +2090,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1956
2090
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
1957
2091
|
return null;
|
|
1958
2092
|
}
|
|
1959
|
-
return /* @__PURE__ */
|
|
2093
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
1960
2094
|
material.ButtonBase,
|
|
1961
2095
|
{
|
|
1962
2096
|
onClick: () => {
|
|
@@ -1964,16 +2098,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1964
2098
|
onChange(null);
|
|
1965
2099
|
}
|
|
1966
2100
|
},
|
|
1967
|
-
/* @__PURE__ */
|
|
2101
|
+
/* @__PURE__ */ React82__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
1968
2102
|
);
|
|
1969
2103
|
};
|
|
1970
2104
|
const renderOpenButton = () => {
|
|
1971
2105
|
if (value) {
|
|
1972
|
-
return /* @__PURE__ */
|
|
2106
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
1973
2107
|
}
|
|
1974
|
-
return /* @__PURE__ */
|
|
2108
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
|
|
1975
2109
|
};
|
|
1976
|
-
return /* @__PURE__ */
|
|
2110
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React82__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React82__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React82__default.default.createElement(
|
|
1977
2111
|
material.Menu,
|
|
1978
2112
|
{
|
|
1979
2113
|
anchorEl,
|
|
@@ -1983,7 +2117,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1983
2117
|
sx: { height: "auto", padding: 0 }
|
|
1984
2118
|
}
|
|
1985
2119
|
},
|
|
1986
|
-
/* @__PURE__ */
|
|
2120
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
1987
2121
|
Picker,
|
|
1988
2122
|
{
|
|
1989
2123
|
value: value || "",
|
|
@@ -1998,10 +2132,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
1998
2132
|
|
|
1999
2133
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2000
2134
|
function ColorInput2(props) {
|
|
2001
|
-
return /* @__PURE__ */
|
|
2135
|
+
return /* @__PURE__ */ React82__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2002
2136
|
}
|
|
2003
2137
|
function NullableColorInput(props) {
|
|
2004
|
-
return /* @__PURE__ */
|
|
2138
|
+
return /* @__PURE__ */ React82__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2005
2139
|
}
|
|
2006
2140
|
|
|
2007
2141
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2054,13 +2188,13 @@ var FONT_FAMILIES = [
|
|
|
2054
2188
|
];
|
|
2055
2189
|
|
|
2056
2190
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2057
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2191
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React82__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2058
2192
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2059
|
-
const [value, setValue] =
|
|
2060
|
-
|
|
2193
|
+
const [value, setValue] = React82.useState(defaultValue != null ? defaultValue : "inherit");
|
|
2194
|
+
React82.useEffect(() => {
|
|
2061
2195
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2062
2196
|
}, [defaultValue]);
|
|
2063
|
-
return /* @__PURE__ */
|
|
2197
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
2064
2198
|
material.TextField,
|
|
2065
2199
|
{
|
|
2066
2200
|
select: true,
|
|
@@ -2073,23 +2207,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2073
2207
|
onChange(v === null ? null : v);
|
|
2074
2208
|
}
|
|
2075
2209
|
},
|
|
2076
|
-
/* @__PURE__ */
|
|
2210
|
+
/* @__PURE__ */ React82__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2077
2211
|
OPTIONS
|
|
2078
2212
|
);
|
|
2079
2213
|
}
|
|
2080
2214
|
function FontSizeInput({ label, defaultValue, onChange }) {
|
|
2081
|
-
const [value, setValue] =
|
|
2082
|
-
|
|
2215
|
+
const [value, setValue] = React82.useState(defaultValue);
|
|
2216
|
+
React82.useEffect(() => {
|
|
2083
2217
|
setValue(defaultValue);
|
|
2084
2218
|
}, [defaultValue]);
|
|
2085
2219
|
const handleChange = (value2) => {
|
|
2086
2220
|
setValue(value2);
|
|
2087
2221
|
onChange(value2);
|
|
2088
2222
|
};
|
|
2089
|
-
return /* @__PURE__ */
|
|
2223
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React82__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React82__default.default.createElement(
|
|
2090
2224
|
RawSliderInput,
|
|
2091
2225
|
{
|
|
2092
|
-
iconLabel: /* @__PURE__ */
|
|
2226
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2093
2227
|
value,
|
|
2094
2228
|
setValue: handleChange,
|
|
2095
2229
|
units: "px",
|
|
@@ -2100,11 +2234,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2100
2234
|
));
|
|
2101
2235
|
}
|
|
2102
2236
|
function FontWeightInput({ label, defaultValue, onChange }) {
|
|
2103
|
-
const [value, setValue] =
|
|
2104
|
-
|
|
2237
|
+
const [value, setValue] = React82.useState(defaultValue);
|
|
2238
|
+
React82.useEffect(() => {
|
|
2105
2239
|
setValue(defaultValue);
|
|
2106
2240
|
}, [defaultValue]);
|
|
2107
|
-
return /* @__PURE__ */
|
|
2241
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
2108
2242
|
RadioGroupInput,
|
|
2109
2243
|
{
|
|
2110
2244
|
label,
|
|
@@ -2114,12 +2248,12 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2114
2248
|
onChange(fontWeight);
|
|
2115
2249
|
}
|
|
2116
2250
|
},
|
|
2117
|
-
/* @__PURE__ */
|
|
2118
|
-
/* @__PURE__ */
|
|
2251
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
|
|
2252
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
|
|
2119
2253
|
);
|
|
2120
2254
|
}
|
|
2121
2255
|
function PaddingInput({ label, defaultValue, onChange }) {
|
|
2122
|
-
const [value, setValue] =
|
|
2256
|
+
const [value, setValue] = React82.useState(() => {
|
|
2123
2257
|
if (defaultValue) {
|
|
2124
2258
|
return defaultValue;
|
|
2125
2259
|
}
|
|
@@ -2137,10 +2271,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2137
2271
|
setValue(v);
|
|
2138
2272
|
onChange(v);
|
|
2139
2273
|
}
|
|
2140
|
-
return /* @__PURE__ */
|
|
2274
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React82__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React82__default.default.createElement(
|
|
2141
2275
|
RawSliderInput,
|
|
2142
2276
|
{
|
|
2143
|
-
iconLabel: /* @__PURE__ */
|
|
2277
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2144
2278
|
value: value.top,
|
|
2145
2279
|
setValue: (num) => handleChange("top", num),
|
|
2146
2280
|
units: "px",
|
|
@@ -2149,10 +2283,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2149
2283
|
max: 80,
|
|
2150
2284
|
marks: true
|
|
2151
2285
|
}
|
|
2152
|
-
), /* @__PURE__ */
|
|
2286
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2153
2287
|
RawSliderInput,
|
|
2154
2288
|
{
|
|
2155
|
-
iconLabel: /* @__PURE__ */
|
|
2289
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2156
2290
|
value: value.bottom,
|
|
2157
2291
|
setValue: (num) => handleChange("bottom", num),
|
|
2158
2292
|
units: "px",
|
|
@@ -2161,10 +2295,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2161
2295
|
max: 80,
|
|
2162
2296
|
marks: true
|
|
2163
2297
|
}
|
|
2164
|
-
), /* @__PURE__ */
|
|
2298
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2165
2299
|
RawSliderInput,
|
|
2166
2300
|
{
|
|
2167
|
-
iconLabel: /* @__PURE__ */
|
|
2301
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2168
2302
|
value: value.left,
|
|
2169
2303
|
setValue: (num) => handleChange("left", num),
|
|
2170
2304
|
units: "px",
|
|
@@ -2173,10 +2307,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2173
2307
|
max: 80,
|
|
2174
2308
|
marks: true
|
|
2175
2309
|
}
|
|
2176
|
-
), /* @__PURE__ */
|
|
2310
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2177
2311
|
RawSliderInput,
|
|
2178
2312
|
{
|
|
2179
|
-
iconLabel: /* @__PURE__ */
|
|
2313
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2180
2314
|
value: value.right,
|
|
2181
2315
|
setValue: (num) => handleChange("right", num),
|
|
2182
2316
|
units: "px",
|
|
@@ -2188,11 +2322,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2188
2322
|
));
|
|
2189
2323
|
}
|
|
2190
2324
|
function TextAlignInput({ label, defaultValue, onChange }) {
|
|
2191
|
-
const [value, setValue] =
|
|
2192
|
-
|
|
2325
|
+
const [value, setValue] = React82.useState(defaultValue != null ? defaultValue : "left");
|
|
2326
|
+
React82.useEffect(() => {
|
|
2193
2327
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2194
2328
|
}, [defaultValue]);
|
|
2195
|
-
return /* @__PURE__ */
|
|
2329
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
2196
2330
|
RadioGroupInput,
|
|
2197
2331
|
{
|
|
2198
2332
|
label,
|
|
@@ -2202,9 +2336,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2202
2336
|
onChange(value2);
|
|
2203
2337
|
}
|
|
2204
2338
|
},
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
-
/* @__PURE__ */
|
|
2339
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2340
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2341
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2208
2342
|
);
|
|
2209
2343
|
}
|
|
2210
2344
|
|
|
@@ -2217,14 +2351,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2217
2351
|
};
|
|
2218
2352
|
switch (name) {
|
|
2219
2353
|
case "backgroundColor":
|
|
2220
|
-
return /* @__PURE__ */
|
|
2354
|
+
return /* @__PURE__ */ React82__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
|
|
2221
2355
|
case "borderColor":
|
|
2222
|
-
return /* @__PURE__ */
|
|
2356
|
+
return /* @__PURE__ */ React82__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
|
|
2223
2357
|
case "borderRadius":
|
|
2224
|
-
return /* @__PURE__ */
|
|
2358
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
2225
2359
|
SliderInput,
|
|
2226
2360
|
{
|
|
2227
|
-
iconLabel: /* @__PURE__ */
|
|
2361
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2228
2362
|
units: "px",
|
|
2229
2363
|
step: 4,
|
|
2230
2364
|
marks: true,
|
|
@@ -2236,29 +2370,29 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2236
2370
|
}
|
|
2237
2371
|
);
|
|
2238
2372
|
case "color":
|
|
2239
|
-
return /* @__PURE__ */
|
|
2373
|
+
return /* @__PURE__ */ React82__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
|
|
2240
2374
|
case "fontFamily":
|
|
2241
|
-
return /* @__PURE__ */
|
|
2375
|
+
return /* @__PURE__ */ React82__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
|
|
2242
2376
|
case "fontSize":
|
|
2243
|
-
return /* @__PURE__ */
|
|
2377
|
+
return /* @__PURE__ */ React82__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
|
|
2244
2378
|
case "fontWeight":
|
|
2245
|
-
return /* @__PURE__ */
|
|
2379
|
+
return /* @__PURE__ */ React82__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
|
|
2246
2380
|
case "textAlign":
|
|
2247
|
-
return /* @__PURE__ */
|
|
2381
|
+
return /* @__PURE__ */ React82__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
|
|
2248
2382
|
case "padding":
|
|
2249
|
-
return /* @__PURE__ */
|
|
2383
|
+
return /* @__PURE__ */ React82__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
|
|
2250
2384
|
}
|
|
2251
2385
|
}
|
|
2252
2386
|
|
|
2253
2387
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2254
2388
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2255
|
-
return /* @__PURE__ */
|
|
2389
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React82__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2256
2390
|
}
|
|
2257
2391
|
|
|
2258
2392
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
2259
2393
|
function AvatarSidebarPanel({ data, setData }) {
|
|
2260
2394
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2261
|
-
const [, setErrors] =
|
|
2395
|
+
const [, setErrors] = React82.useState(null);
|
|
2262
2396
|
const updateData = (d) => {
|
|
2263
2397
|
const res = AvatarPropsSchema.safeParse(d);
|
|
2264
2398
|
if (res.success) {
|
|
@@ -2272,11 +2406,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2272
2406
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2273
2407
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2274
2408
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2275
|
-
return /* @__PURE__ */
|
|
2409
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2276
2410
|
SliderInput,
|
|
2277
2411
|
{
|
|
2278
2412
|
label: "Size",
|
|
2279
|
-
iconLabel: /* @__PURE__ */
|
|
2413
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2280
2414
|
units: "px",
|
|
2281
2415
|
step: 3,
|
|
2282
2416
|
min: 32,
|
|
@@ -2286,7 +2420,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2286
2420
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2287
2421
|
}
|
|
2288
2422
|
}
|
|
2289
|
-
), /* @__PURE__ */
|
|
2423
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2290
2424
|
RadioGroupInput,
|
|
2291
2425
|
{
|
|
2292
2426
|
label: "Shape",
|
|
@@ -2295,10 +2429,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2295
2429
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2296
2430
|
}
|
|
2297
2431
|
},
|
|
2298
|
-
/* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
/* @__PURE__ */
|
|
2301
|
-
), /* @__PURE__ */
|
|
2432
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
|
|
2433
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
|
|
2434
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
|
|
2435
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2302
2436
|
TextInput,
|
|
2303
2437
|
{
|
|
2304
2438
|
label: "Image URL",
|
|
@@ -2307,7 +2441,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2307
2441
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2308
2442
|
}
|
|
2309
2443
|
}
|
|
2310
|
-
), /* @__PURE__ */
|
|
2444
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2311
2445
|
TextInput,
|
|
2312
2446
|
{
|
|
2313
2447
|
label: "Alt text",
|
|
@@ -2316,7 +2450,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2316
2450
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2317
2451
|
}
|
|
2318
2452
|
}
|
|
2319
|
-
), /* @__PURE__ */
|
|
2453
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2320
2454
|
MultiStylePropertyPanel,
|
|
2321
2455
|
{
|
|
2322
2456
|
names: ["textAlign", "padding"],
|
|
@@ -2327,7 +2461,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2327
2461
|
}
|
|
2328
2462
|
function ButtonSidebarPanel({ data, setData }) {
|
|
2329
2463
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2330
|
-
const [, setErrors] =
|
|
2464
|
+
const [, setErrors] = React82.useState(null);
|
|
2331
2465
|
const updateData = (d) => {
|
|
2332
2466
|
const res = ButtonPropsSchema.safeParse(d);
|
|
2333
2467
|
if (res.success) {
|
|
@@ -2344,65 +2478,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2344
2478
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2345
2479
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2346
2480
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2347
|
-
return /* @__PURE__ */
|
|
2481
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2348
2482
|
TextInput,
|
|
2349
2483
|
{
|
|
2350
2484
|
label: "Text",
|
|
2351
2485
|
defaultValue: text,
|
|
2352
2486
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2353
2487
|
}
|
|
2354
|
-
), /* @__PURE__ */
|
|
2488
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2355
2489
|
TextInput,
|
|
2356
2490
|
{
|
|
2357
2491
|
label: "Url",
|
|
2358
2492
|
defaultValue: url,
|
|
2359
2493
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2360
2494
|
}
|
|
2361
|
-
), /* @__PURE__ */
|
|
2495
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2362
2496
|
RadioGroupInput,
|
|
2363
2497
|
{
|
|
2364
2498
|
label: "Width",
|
|
2365
2499
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2366
2500
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2367
2501
|
},
|
|
2368
|
-
/* @__PURE__ */
|
|
2369
|
-
/* @__PURE__ */
|
|
2370
|
-
), /* @__PURE__ */
|
|
2502
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
|
|
2503
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
|
|
2504
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2371
2505
|
RadioGroupInput,
|
|
2372
2506
|
{
|
|
2373
2507
|
label: "Size",
|
|
2374
2508
|
defaultValue: size,
|
|
2375
2509
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2376
2510
|
},
|
|
2377
|
-
/* @__PURE__ */
|
|
2378
|
-
/* @__PURE__ */
|
|
2379
|
-
/* @__PURE__ */
|
|
2380
|
-
/* @__PURE__ */
|
|
2381
|
-
), /* @__PURE__ */
|
|
2511
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
|
|
2512
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
|
|
2513
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
|
|
2514
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
|
|
2515
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2382
2516
|
RadioGroupInput,
|
|
2383
2517
|
{
|
|
2384
2518
|
label: "Style",
|
|
2385
2519
|
defaultValue: buttonStyle,
|
|
2386
2520
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2387
2521
|
},
|
|
2388
|
-
/* @__PURE__ */
|
|
2389
|
-
/* @__PURE__ */
|
|
2390
|
-
/* @__PURE__ */
|
|
2391
|
-
), /* @__PURE__ */
|
|
2522
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
|
|
2523
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
|
|
2524
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
|
|
2525
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2392
2526
|
ColorInput2,
|
|
2393
2527
|
{
|
|
2394
2528
|
label: "Text color",
|
|
2395
2529
|
defaultValue: buttonTextColor,
|
|
2396
2530
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2397
2531
|
}
|
|
2398
|
-
), /* @__PURE__ */
|
|
2532
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2399
2533
|
ColorInput2,
|
|
2400
2534
|
{
|
|
2401
2535
|
label: "Button color",
|
|
2402
2536
|
defaultValue: buttonBackgroundColor,
|
|
2403
2537
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2404
2538
|
}
|
|
2405
|
-
), /* @__PURE__ */
|
|
2539
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2406
2540
|
MultiStylePropertyPanel,
|
|
2407
2541
|
{
|
|
2408
2542
|
names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -2428,7 +2562,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2428
2562
|
const value = parseInt(ev.target.value);
|
|
2429
2563
|
onChange(isNaN(value) ? null : value);
|
|
2430
2564
|
};
|
|
2431
|
-
return /* @__PURE__ */
|
|
2565
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
2432
2566
|
material.TextField,
|
|
2433
2567
|
{
|
|
2434
2568
|
fullWidth: true,
|
|
@@ -2439,7 +2573,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2439
2573
|
placeholder: "auto",
|
|
2440
2574
|
size: "small",
|
|
2441
2575
|
InputProps: {
|
|
2442
|
-
endAdornment: /* @__PURE__ */
|
|
2576
|
+
endAdornment: /* @__PURE__ */ React82__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2443
2577
|
}
|
|
2444
2578
|
}
|
|
2445
2579
|
);
|
|
@@ -2447,7 +2581,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2447
2581
|
|
|
2448
2582
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
|
|
2449
2583
|
function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
2450
|
-
const [currentValue, setCurrentValue] =
|
|
2584
|
+
const [currentValue, setCurrentValue] = React82.useState(() => {
|
|
2451
2585
|
if (defaultValue) {
|
|
2452
2586
|
return defaultValue;
|
|
2453
2587
|
}
|
|
@@ -2461,7 +2595,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2461
2595
|
};
|
|
2462
2596
|
let column3 = null;
|
|
2463
2597
|
{
|
|
2464
|
-
column3 = /* @__PURE__ */
|
|
2598
|
+
column3 = /* @__PURE__ */ React82__default.default.createElement(
|
|
2465
2599
|
TextDimensionInput,
|
|
2466
2600
|
{
|
|
2467
2601
|
label: "Column 3",
|
|
@@ -2472,7 +2606,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2472
2606
|
}
|
|
2473
2607
|
);
|
|
2474
2608
|
}
|
|
2475
|
-
return /* @__PURE__ */
|
|
2609
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2476
2610
|
TextDimensionInput,
|
|
2477
2611
|
{
|
|
2478
2612
|
label: "Column 1",
|
|
@@ -2481,7 +2615,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2481
2615
|
setIndexValue(0, v);
|
|
2482
2616
|
}
|
|
2483
2617
|
}
|
|
2484
|
-
), /* @__PURE__ */
|
|
2618
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2485
2619
|
TextDimensionInput,
|
|
2486
2620
|
{
|
|
2487
2621
|
label: "Column 2",
|
|
@@ -2496,7 +2630,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2496
2630
|
// src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
|
|
2497
2631
|
function ColumnsContainerPanel({ data, setData }) {
|
|
2498
2632
|
var _a, _b, _c, _d, _e, _f;
|
|
2499
|
-
const [, setErrors] =
|
|
2633
|
+
const [, setErrors] = React82.useState(null);
|
|
2500
2634
|
const updateData = (d) => {
|
|
2501
2635
|
const res = columns_container_props_schema_default2.safeParse(d);
|
|
2502
2636
|
if (res.success) {
|
|
@@ -2506,7 +2640,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2506
2640
|
setErrors(res.error);
|
|
2507
2641
|
}
|
|
2508
2642
|
};
|
|
2509
|
-
return /* @__PURE__ */
|
|
2643
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2510
2644
|
RadioGroupInput,
|
|
2511
2645
|
{
|
|
2512
2646
|
label: "Number of columns",
|
|
@@ -2515,9 +2649,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2515
2649
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
2516
2650
|
}
|
|
2517
2651
|
},
|
|
2518
|
-
/* @__PURE__ */
|
|
2519
|
-
/* @__PURE__ */
|
|
2520
|
-
), /* @__PURE__ */
|
|
2652
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
|
|
2653
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
|
|
2654
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2521
2655
|
ColumnWidthsInput,
|
|
2522
2656
|
{
|
|
2523
2657
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -2525,11 +2659,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2525
2659
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
2526
2660
|
}
|
|
2527
2661
|
}
|
|
2528
|
-
), /* @__PURE__ */
|
|
2662
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2529
2663
|
SliderInput,
|
|
2530
2664
|
{
|
|
2531
2665
|
label: "Columns gap",
|
|
2532
|
-
iconLabel: /* @__PURE__ */
|
|
2666
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
2533
2667
|
units: "px",
|
|
2534
2668
|
step: 4,
|
|
2535
2669
|
marks: true,
|
|
@@ -2538,7 +2672,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2538
2672
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
2539
2673
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
2540
2674
|
}
|
|
2541
|
-
), /* @__PURE__ */
|
|
2675
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2542
2676
|
RadioGroupInput,
|
|
2543
2677
|
{
|
|
2544
2678
|
label: "Alignment",
|
|
@@ -2547,10 +2681,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2547
2681
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
2548
2682
|
}
|
|
2549
2683
|
},
|
|
2550
|
-
/* @__PURE__ */
|
|
2551
|
-
/* @__PURE__ */
|
|
2552
|
-
/* @__PURE__ */
|
|
2553
|
-
), /* @__PURE__ */
|
|
2684
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
2685
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
2686
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
2687
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2554
2688
|
MultiStylePropertyPanel,
|
|
2555
2689
|
{
|
|
2556
2690
|
names: ["backgroundColor", "padding"],
|
|
@@ -2569,7 +2703,7 @@ var container_props_schema_default = ContainerPropsSchema3;
|
|
|
2569
2703
|
|
|
2570
2704
|
// src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
|
|
2571
2705
|
function ContainerSidebarPanel({ data, setData }) {
|
|
2572
|
-
const [, setErrors] =
|
|
2706
|
+
const [, setErrors] = React82.useState(null);
|
|
2573
2707
|
const updateData = (d) => {
|
|
2574
2708
|
const res = container_props_schema_default.safeParse(d);
|
|
2575
2709
|
if (res.success) {
|
|
@@ -2579,7 +2713,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2579
2713
|
setErrors(res.error);
|
|
2580
2714
|
}
|
|
2581
2715
|
};
|
|
2582
|
-
return /* @__PURE__ */
|
|
2716
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2583
2717
|
MultiStylePropertyPanel,
|
|
2584
2718
|
{
|
|
2585
2719
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -2590,7 +2724,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2590
2724
|
}
|
|
2591
2725
|
function DividerSidebarPanel({ data, setData }) {
|
|
2592
2726
|
var _a, _b, _c, _d;
|
|
2593
|
-
const [, setErrors] =
|
|
2727
|
+
const [, setErrors] = React82.useState(null);
|
|
2594
2728
|
const updateData = (d) => {
|
|
2595
2729
|
const res = DividerPropsSchema.safeParse(d);
|
|
2596
2730
|
if (res.success) {
|
|
@@ -2602,18 +2736,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2602
2736
|
};
|
|
2603
2737
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
2604
2738
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
2605
|
-
return /* @__PURE__ */
|
|
2739
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2606
2740
|
ColorInput2,
|
|
2607
2741
|
{
|
|
2608
2742
|
label: "Color",
|
|
2609
2743
|
defaultValue: lineColor,
|
|
2610
2744
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
2611
2745
|
}
|
|
2612
|
-
), /* @__PURE__ */
|
|
2746
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2613
2747
|
SliderInput,
|
|
2614
2748
|
{
|
|
2615
2749
|
label: "Height",
|
|
2616
|
-
iconLabel: /* @__PURE__ */
|
|
2750
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
2617
2751
|
units: "px",
|
|
2618
2752
|
step: 1,
|
|
2619
2753
|
min: 1,
|
|
@@ -2621,7 +2755,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2621
2755
|
defaultValue: lineHeight,
|
|
2622
2756
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
2623
2757
|
}
|
|
2624
|
-
), /* @__PURE__ */
|
|
2758
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2625
2759
|
MultiStylePropertyPanel,
|
|
2626
2760
|
{
|
|
2627
2761
|
names: ["backgroundColor", "padding"],
|
|
@@ -2656,7 +2790,7 @@ var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
|
2656
2790
|
// src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
|
|
2657
2791
|
function EmailLayoutSidebarFields({ data, setData }) {
|
|
2658
2792
|
var _a, _b, _c, _d, _e;
|
|
2659
|
-
const [, setErrors] =
|
|
2793
|
+
const [, setErrors] = React82.useState(null);
|
|
2660
2794
|
const updateData = (d) => {
|
|
2661
2795
|
const res = email_layout_props_schema_default.safeParse(d);
|
|
2662
2796
|
if (res.success) {
|
|
@@ -2666,31 +2800,31 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2666
2800
|
setErrors(res.error);
|
|
2667
2801
|
}
|
|
2668
2802
|
};
|
|
2669
|
-
return /* @__PURE__ */
|
|
2803
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2670
2804
|
ColorInput2,
|
|
2671
2805
|
{
|
|
2672
2806
|
label: "Backdrop color",
|
|
2673
2807
|
defaultValue: (_a = data.backdropColor) != null ? _a : "#F5F5F5",
|
|
2674
2808
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
2675
2809
|
}
|
|
2676
|
-
), /* @__PURE__ */
|
|
2810
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2677
2811
|
ColorInput2,
|
|
2678
2812
|
{
|
|
2679
2813
|
label: "Canvas color",
|
|
2680
2814
|
defaultValue: (_b = data.canvasColor) != null ? _b : "#FFFFFF",
|
|
2681
2815
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
2682
2816
|
}
|
|
2683
|
-
), /* @__PURE__ */
|
|
2817
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2684
2818
|
NullableColorInput,
|
|
2685
2819
|
{
|
|
2686
2820
|
label: "Canvas border color",
|
|
2687
2821
|
defaultValue: (_c = data.borderColor) != null ? _c : null,
|
|
2688
2822
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
2689
2823
|
}
|
|
2690
|
-
), /* @__PURE__ */
|
|
2824
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2691
2825
|
SliderInput,
|
|
2692
2826
|
{
|
|
2693
|
-
iconLabel: /* @__PURE__ */
|
|
2827
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2694
2828
|
units: "px",
|
|
2695
2829
|
step: 4,
|
|
2696
2830
|
marks: true,
|
|
@@ -2700,14 +2834,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2700
2834
|
defaultValue: (_d = data.borderRadius) != null ? _d : 0,
|
|
2701
2835
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
2702
2836
|
}
|
|
2703
|
-
), /* @__PURE__ */
|
|
2837
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2704
2838
|
NullableFontFamily,
|
|
2705
2839
|
{
|
|
2706
2840
|
label: "Font family",
|
|
2707
2841
|
defaultValue: "MODERN_SANS",
|
|
2708
2842
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
2709
2843
|
}
|
|
2710
|
-
), /* @__PURE__ */
|
|
2844
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2711
2845
|
ColorInput2,
|
|
2712
2846
|
{
|
|
2713
2847
|
label: "Text color",
|
|
@@ -2718,7 +2852,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2718
2852
|
}
|
|
2719
2853
|
function HeadingSidebarPanel({ data, setData }) {
|
|
2720
2854
|
var _a, _b, _c, _d;
|
|
2721
|
-
const [, setErrors] =
|
|
2855
|
+
const [, setErrors] = React82.useState(null);
|
|
2722
2856
|
const updateData = (d) => {
|
|
2723
2857
|
const res = HeadingPropsSchema.safeParse(d);
|
|
2724
2858
|
if (res.success) {
|
|
@@ -2728,7 +2862,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2728
2862
|
setErrors(res.error);
|
|
2729
2863
|
}
|
|
2730
2864
|
};
|
|
2731
|
-
return /* @__PURE__ */
|
|
2865
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2732
2866
|
TextInput,
|
|
2733
2867
|
{
|
|
2734
2868
|
label: "Content",
|
|
@@ -2738,7 +2872,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2738
2872
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
2739
2873
|
}
|
|
2740
2874
|
}
|
|
2741
|
-
), /* @__PURE__ */
|
|
2875
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2742
2876
|
RadioGroupInput,
|
|
2743
2877
|
{
|
|
2744
2878
|
label: "Level",
|
|
@@ -2747,10 +2881,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2747
2881
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
2748
2882
|
}
|
|
2749
2883
|
},
|
|
2750
|
-
/* @__PURE__ */
|
|
2751
|
-
/* @__PURE__ */
|
|
2752
|
-
/* @__PURE__ */
|
|
2753
|
-
), /* @__PURE__ */
|
|
2884
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
|
|
2885
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
|
|
2886
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
|
|
2887
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2754
2888
|
MultiStylePropertyPanel,
|
|
2755
2889
|
{
|
|
2756
2890
|
names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
|
|
@@ -2761,7 +2895,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2761
2895
|
}
|
|
2762
2896
|
function HtmlSidebarPanel({ data, setData }) {
|
|
2763
2897
|
var _a, _b;
|
|
2764
|
-
const [, setErrors] =
|
|
2898
|
+
const [, setErrors] = React82.useState(null);
|
|
2765
2899
|
const updateData = (d) => {
|
|
2766
2900
|
const res = HtmlPropsSchema.safeParse(d);
|
|
2767
2901
|
if (res.success) {
|
|
@@ -2771,7 +2905,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2771
2905
|
setErrors(res.error);
|
|
2772
2906
|
}
|
|
2773
2907
|
};
|
|
2774
|
-
return /* @__PURE__ */
|
|
2908
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2775
2909
|
TextInput,
|
|
2776
2910
|
{
|
|
2777
2911
|
label: "Content",
|
|
@@ -2779,7 +2913,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2779
2913
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
2780
2914
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
2781
2915
|
}
|
|
2782
|
-
), /* @__PURE__ */
|
|
2916
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2783
2917
|
MultiStylePropertyPanel,
|
|
2784
2918
|
{
|
|
2785
2919
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -2790,7 +2924,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2790
2924
|
}
|
|
2791
2925
|
function ImageSidebarPanel({ data, setData }) {
|
|
2792
2926
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
2793
|
-
const [, setErrors] =
|
|
2927
|
+
const [, setErrors] = React82.useState(null);
|
|
2794
2928
|
const updateData = (d) => {
|
|
2795
2929
|
const res = ImagePropsSchema.safeParse(d);
|
|
2796
2930
|
if (res.success) {
|
|
@@ -2800,7 +2934,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2800
2934
|
setErrors(res.error);
|
|
2801
2935
|
}
|
|
2802
2936
|
};
|
|
2803
|
-
return /* @__PURE__ */
|
|
2937
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2804
2938
|
TextInput,
|
|
2805
2939
|
{
|
|
2806
2940
|
label: "Source URL",
|
|
@@ -2810,14 +2944,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2810
2944
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
|
|
2811
2945
|
}
|
|
2812
2946
|
}
|
|
2813
|
-
), /* @__PURE__ */
|
|
2947
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2814
2948
|
TextInput,
|
|
2815
2949
|
{
|
|
2816
2950
|
label: "Alt text",
|
|
2817
2951
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
2818
2952
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
2819
2953
|
}
|
|
2820
|
-
), /* @__PURE__ */
|
|
2954
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2821
2955
|
TextInput,
|
|
2822
2956
|
{
|
|
2823
2957
|
label: "Click through URL",
|
|
@@ -2827,31 +2961,31 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2827
2961
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
2828
2962
|
}
|
|
2829
2963
|
}
|
|
2830
|
-
), /* @__PURE__ */
|
|
2964
|
+
), /* @__PURE__ */ React82__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2831
2965
|
TextDimensionInput,
|
|
2832
2966
|
{
|
|
2833
2967
|
label: "Width",
|
|
2834
2968
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
2835
2969
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
2836
2970
|
}
|
|
2837
|
-
), /* @__PURE__ */
|
|
2971
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2838
2972
|
TextDimensionInput,
|
|
2839
2973
|
{
|
|
2840
2974
|
label: "Height",
|
|
2841
2975
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
2842
2976
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
2843
2977
|
}
|
|
2844
|
-
)), /* @__PURE__ */
|
|
2978
|
+
)), /* @__PURE__ */ React82__default.default.createElement(
|
|
2845
2979
|
RadioGroupInput,
|
|
2846
2980
|
{
|
|
2847
2981
|
label: "Alignment",
|
|
2848
2982
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
2849
2983
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
2850
2984
|
},
|
|
2851
|
-
/* @__PURE__ */
|
|
2852
|
-
/* @__PURE__ */
|
|
2853
|
-
/* @__PURE__ */
|
|
2854
|
-
), /* @__PURE__ */
|
|
2985
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
2986
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
2987
|
+
/* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
2988
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2855
2989
|
MultiStylePropertyPanel,
|
|
2856
2990
|
{
|
|
2857
2991
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
@@ -2862,7 +2996,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2862
2996
|
}
|
|
2863
2997
|
function SpacerSidebarPanel({ data, setData }) {
|
|
2864
2998
|
var _a, _b;
|
|
2865
|
-
const [, setErrors] =
|
|
2999
|
+
const [, setErrors] = React82.useState(null);
|
|
2866
3000
|
const updateData = (d) => {
|
|
2867
3001
|
const res = SpacerPropsSchema.safeParse(d);
|
|
2868
3002
|
if (res.success) {
|
|
@@ -2872,11 +3006,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
2872
3006
|
setErrors(res.error);
|
|
2873
3007
|
}
|
|
2874
3008
|
};
|
|
2875
|
-
return /* @__PURE__ */
|
|
3009
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2876
3010
|
SliderInput,
|
|
2877
3011
|
{
|
|
2878
3012
|
label: "Height",
|
|
2879
|
-
iconLabel: /* @__PURE__ */
|
|
3013
|
+
iconLabel: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
2880
3014
|
units: "px",
|
|
2881
3015
|
step: 4,
|
|
2882
3016
|
min: 4,
|
|
@@ -2887,15 +3021,15 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
2887
3021
|
));
|
|
2888
3022
|
}
|
|
2889
3023
|
function BooleanInput({ label, defaultValue, onChange }) {
|
|
2890
|
-
const [value, setValue] =
|
|
2891
|
-
|
|
3024
|
+
const [value, setValue] = React82.useState(defaultValue);
|
|
3025
|
+
React82.useEffect(() => {
|
|
2892
3026
|
setValue(defaultValue);
|
|
2893
3027
|
}, [defaultValue]);
|
|
2894
|
-
return /* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
2895
3029
|
material.FormControlLabel,
|
|
2896
3030
|
{
|
|
2897
3031
|
label,
|
|
2898
|
-
control: /* @__PURE__ */
|
|
3032
|
+
control: /* @__PURE__ */ React82__default.default.createElement(
|
|
2899
3033
|
material.Switch,
|
|
2900
3034
|
{
|
|
2901
3035
|
checked: value,
|
|
@@ -2912,7 +3046,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
2912
3046
|
// src/app/inspector-drawer/configuration-panel/input-panels/text-sidebar-panel.tsx
|
|
2913
3047
|
function TextSidebarPanel({ data, setData }) {
|
|
2914
3048
|
var _a, _b, _c, _d;
|
|
2915
|
-
const [, setErrors] =
|
|
3049
|
+
const [, setErrors] = React82.useState(null);
|
|
2916
3050
|
const updateData = (d) => {
|
|
2917
3051
|
const res = TextPropsSchema.safeParse(d);
|
|
2918
3052
|
if (res.success) {
|
|
@@ -2922,7 +3056,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
2922
3056
|
setErrors(res.error);
|
|
2923
3057
|
}
|
|
2924
3058
|
};
|
|
2925
|
-
return /* @__PURE__ */
|
|
3059
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React82__default.default.createElement(
|
|
2926
3060
|
TextInput,
|
|
2927
3061
|
{
|
|
2928
3062
|
label: "Content",
|
|
@@ -2930,14 +3064,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
2930
3064
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
2931
3065
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
2932
3066
|
}
|
|
2933
|
-
), /* @__PURE__ */
|
|
3067
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2934
3068
|
BooleanInput,
|
|
2935
3069
|
{
|
|
2936
3070
|
label: "Markdown",
|
|
2937
3071
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
2938
3072
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
2939
3073
|
}
|
|
2940
|
-
), /* @__PURE__ */
|
|
3074
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
2941
3075
|
MultiStylePropertyPanel,
|
|
2942
3076
|
{
|
|
2943
3077
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -2949,7 +3083,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
2949
3083
|
|
|
2950
3084
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
2951
3085
|
function renderMessage(val) {
|
|
2952
|
-
return /* @__PURE__ */
|
|
3086
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React82__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
|
|
2953
3087
|
}
|
|
2954
3088
|
function ConfigurationPanel() {
|
|
2955
3089
|
const document2 = useDocument();
|
|
@@ -2965,53 +3099,53 @@ function ConfigurationPanel() {
|
|
|
2965
3099
|
const { data, type } = block;
|
|
2966
3100
|
switch (type) {
|
|
2967
3101
|
case "Avatar":
|
|
2968
|
-
return /* @__PURE__ */
|
|
3102
|
+
return /* @__PURE__ */ React82__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2969
3103
|
case "Button":
|
|
2970
|
-
return /* @__PURE__ */
|
|
3104
|
+
return /* @__PURE__ */ React82__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2971
3105
|
case "ColumnsContainer":
|
|
2972
|
-
return /* @__PURE__ */
|
|
3106
|
+
return /* @__PURE__ */ React82__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2973
3107
|
case "Container":
|
|
2974
|
-
return /* @__PURE__ */
|
|
3108
|
+
return /* @__PURE__ */ React82__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2975
3109
|
case "Divider":
|
|
2976
|
-
return /* @__PURE__ */
|
|
3110
|
+
return /* @__PURE__ */ React82__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2977
3111
|
case "Heading":
|
|
2978
|
-
return /* @__PURE__ */
|
|
3112
|
+
return /* @__PURE__ */ React82__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2979
3113
|
case "Html":
|
|
2980
|
-
return /* @__PURE__ */
|
|
3114
|
+
return /* @__PURE__ */ React82__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2981
3115
|
case "Image":
|
|
2982
|
-
return /* @__PURE__ */
|
|
3116
|
+
return /* @__PURE__ */ React82__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2983
3117
|
case "EmailLayout":
|
|
2984
|
-
return /* @__PURE__ */
|
|
3118
|
+
return /* @__PURE__ */ React82__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2985
3119
|
case "Spacer":
|
|
2986
|
-
return /* @__PURE__ */
|
|
3120
|
+
return /* @__PURE__ */ React82__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2987
3121
|
case "Text":
|
|
2988
|
-
return /* @__PURE__ */
|
|
3122
|
+
return /* @__PURE__ */ React82__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
2989
3123
|
default:
|
|
2990
|
-
return /* @__PURE__ */
|
|
3124
|
+
return /* @__PURE__ */ React82__default.default.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
2991
3125
|
}
|
|
2992
3126
|
}
|
|
2993
3127
|
function StylesPanel() {
|
|
2994
3128
|
const block = useDocument().root;
|
|
2995
3129
|
if (!block) {
|
|
2996
|
-
return /* @__PURE__ */
|
|
3130
|
+
return /* @__PURE__ */ React82__default.default.createElement("p", null, "Block not found");
|
|
2997
3131
|
}
|
|
2998
3132
|
const { data, type } = block;
|
|
2999
3133
|
if (type !== "EmailLayout") {
|
|
3000
3134
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3001
3135
|
}
|
|
3002
|
-
return /* @__PURE__ */
|
|
3136
|
+
return /* @__PURE__ */ React82__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3003
3137
|
}
|
|
3004
3138
|
function TemplateDownloadButton() {
|
|
3005
3139
|
const doc = useDocument();
|
|
3006
|
-
const href =
|
|
3140
|
+
const href = React82.useMemo(() => {
|
|
3007
3141
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3008
3142
|
}, [doc]);
|
|
3009
|
-
return /* @__PURE__ */
|
|
3143
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3010
3144
|
material.Button,
|
|
3011
3145
|
{
|
|
3012
3146
|
variant: "outlined",
|
|
3013
3147
|
color: "primary",
|
|
3014
|
-
startIcon: /* @__PURE__ */
|
|
3148
|
+
startIcon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
|
|
3015
3149
|
href,
|
|
3016
3150
|
download: "emailTemplate.json",
|
|
3017
3151
|
fullWidth: true
|
|
@@ -3043,9 +3177,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3043
3177
|
}
|
|
3044
3178
|
};
|
|
3045
3179
|
if (!currentTemplateId) {
|
|
3046
|
-
return /* @__PURE__ */
|
|
3180
|
+
return /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
|
|
3047
3181
|
}
|
|
3048
|
-
return /* @__PURE__ */
|
|
3182
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React82__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React82__default.default.createElement(
|
|
3049
3183
|
material.Typography,
|
|
3050
3184
|
{
|
|
3051
3185
|
variant: "body2",
|
|
@@ -3058,29 +3192,29 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3058
3192
|
}
|
|
3059
3193
|
},
|
|
3060
3194
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
3061
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
3195
|
+
), persistenceEnabled && /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
3062
3196
|
material.Button,
|
|
3063
3197
|
{
|
|
3064
3198
|
variant: "outlined",
|
|
3065
3199
|
color: "primary",
|
|
3066
|
-
startIcon: /* @__PURE__ */
|
|
3200
|
+
startIcon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
|
|
3067
3201
|
onClick: handleCopyToSamples,
|
|
3068
3202
|
fullWidth: true,
|
|
3069
3203
|
disabled: !copyTemplate
|
|
3070
3204
|
},
|
|
3071
3205
|
"Save as Sample Template"
|
|
3072
|
-
), /* @__PURE__ */
|
|
3206
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
3073
3207
|
material.Button,
|
|
3074
3208
|
{
|
|
3075
3209
|
variant: "outlined",
|
|
3076
3210
|
color: "error",
|
|
3077
|
-
startIcon: /* @__PURE__ */
|
|
3211
|
+
startIcon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.DeleteOutlined, null),
|
|
3078
3212
|
onClick: handleDelete,
|
|
3079
3213
|
fullWidth: true,
|
|
3080
3214
|
disabled: !deleteTemplate
|
|
3081
3215
|
},
|
|
3082
3216
|
"Delete Template"
|
|
3083
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
3217
|
+
)))), persistenceEnabled && /* @__PURE__ */ React82__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React82__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React82__default.default.createElement(TemplateDownloadButton, null))));
|
|
3084
3218
|
}
|
|
3085
3219
|
|
|
3086
3220
|
// src/app/inspector-drawer/index.tsx
|
|
@@ -3097,11 +3231,11 @@ function InspectorDrawer({
|
|
|
3097
3231
|
const renderCurrentSidebarPanel = () => {
|
|
3098
3232
|
switch (selectedSidebarTab) {
|
|
3099
3233
|
case "block-configuration":
|
|
3100
|
-
return /* @__PURE__ */
|
|
3234
|
+
return /* @__PURE__ */ React82__default.default.createElement(ConfigurationPanel, null);
|
|
3101
3235
|
case "styles":
|
|
3102
|
-
return /* @__PURE__ */
|
|
3236
|
+
return /* @__PURE__ */ React82__default.default.createElement(StylesPanel, null);
|
|
3103
3237
|
case "template-settings":
|
|
3104
|
-
return /* @__PURE__ */
|
|
3238
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3105
3239
|
TemplatePanel,
|
|
3106
3240
|
{
|
|
3107
3241
|
deleteTemplate,
|
|
@@ -3110,7 +3244,7 @@ function InspectorDrawer({
|
|
|
3110
3244
|
);
|
|
3111
3245
|
}
|
|
3112
3246
|
};
|
|
3113
|
-
return /* @__PURE__ */
|
|
3247
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3114
3248
|
material.Drawer,
|
|
3115
3249
|
{
|
|
3116
3250
|
variant: "persistent",
|
|
@@ -3132,8 +3266,8 @@ function InspectorDrawer({
|
|
|
3132
3266
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
3133
3267
|
}
|
|
3134
3268
|
},
|
|
3135
|
-
/* @__PURE__ */
|
|
3136
|
-
/* @__PURE__ */
|
|
3269
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React82__default.default.createElement(material.Box, { px: 2 }, /* @__PURE__ */ React82__default.default.createElement(material.Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v) }, /* @__PURE__ */ React82__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }), /* @__PURE__ */ React82__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }), /* @__PURE__ */ React82__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })))),
|
|
3270
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
3137
3271
|
);
|
|
3138
3272
|
}
|
|
3139
3273
|
function SidebarButton({
|
|
@@ -3155,7 +3289,7 @@ function SidebarButton({
|
|
|
3155
3289
|
console.error("Error loading template:", error);
|
|
3156
3290
|
}
|
|
3157
3291
|
});
|
|
3158
|
-
return /* @__PURE__ */
|
|
3292
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Button, { size: "small", onClick: handleClick, sx: sx2 }, children);
|
|
3159
3293
|
}
|
|
3160
3294
|
|
|
3161
3295
|
// sample-templates/empty-email-message.ts
|
|
@@ -3191,10 +3325,10 @@ function SamplesDrawer({
|
|
|
3191
3325
|
deleteTemplate
|
|
3192
3326
|
}) {
|
|
3193
3327
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
3194
|
-
const [samples, setSamples] =
|
|
3195
|
-
const [templates, setTemplates] =
|
|
3196
|
-
const [loadingSamples, setLoadingSamples] =
|
|
3197
|
-
const [loadingTemplates, setLoadingTemplates] =
|
|
3328
|
+
const [samples, setSamples] = React82.useState([EMPTY_TEMPLATE]);
|
|
3329
|
+
const [templates, setTemplates] = React82.useState([]);
|
|
3330
|
+
const [loadingSamples, setLoadingSamples] = React82.useState(false);
|
|
3331
|
+
const [loadingTemplates, setLoadingTemplates] = React82.useState(false);
|
|
3198
3332
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
3199
3333
|
if (templateId === "empty-email") {
|
|
3200
3334
|
return empty_email_message_default;
|
|
@@ -3204,7 +3338,7 @@ function SamplesDrawer({
|
|
|
3204
3338
|
}
|
|
3205
3339
|
return null;
|
|
3206
3340
|
});
|
|
3207
|
-
|
|
3341
|
+
React82.useEffect(() => {
|
|
3208
3342
|
if (enabled && samplesDrawerOpen && loadSamples) {
|
|
3209
3343
|
setLoadingSamples(true);
|
|
3210
3344
|
loadSamples().then((results) => {
|
|
@@ -3222,7 +3356,7 @@ function SamplesDrawer({
|
|
|
3222
3356
|
});
|
|
3223
3357
|
}
|
|
3224
3358
|
}, [enabled, samplesDrawerOpen, loadSamples]);
|
|
3225
|
-
|
|
3359
|
+
React82.useEffect(() => {
|
|
3226
3360
|
if (enabled && loadTemplates) {
|
|
3227
3361
|
setLoadingTemplates(true);
|
|
3228
3362
|
loadTemplates().then((results) => {
|
|
@@ -3234,7 +3368,7 @@ function SamplesDrawer({
|
|
|
3234
3368
|
});
|
|
3235
3369
|
}
|
|
3236
3370
|
}, [enabled, loadTemplates]);
|
|
3237
|
-
|
|
3371
|
+
React82.useEffect(() => {
|
|
3238
3372
|
const handleTemplateListUpdate = (e) => {
|
|
3239
3373
|
setTemplates(e.detail);
|
|
3240
3374
|
};
|
|
@@ -3244,7 +3378,7 @@ function SamplesDrawer({
|
|
|
3244
3378
|
if (!enabled) {
|
|
3245
3379
|
return null;
|
|
3246
3380
|
}
|
|
3247
|
-
return /* @__PURE__ */
|
|
3381
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
3248
3382
|
material.Drawer,
|
|
3249
3383
|
{
|
|
3250
3384
|
variant: "persistent",
|
|
@@ -3266,7 +3400,7 @@ function SamplesDrawer({
|
|
|
3266
3400
|
width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
|
|
3267
3401
|
}
|
|
3268
3402
|
},
|
|
3269
|
-
/* @__PURE__ */
|
|
3403
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
3270
3404
|
material.Stack,
|
|
3271
3405
|
{
|
|
3272
3406
|
spacing: 3,
|
|
@@ -3276,7 +3410,7 @@ function SamplesDrawer({
|
|
|
3276
3410
|
justifyContent: "space-between",
|
|
3277
3411
|
height: "100%"
|
|
3278
3412
|
},
|
|
3279
|
-
/* @__PURE__ */
|
|
3413
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
3280
3414
|
material.Stack,
|
|
3281
3415
|
{
|
|
3282
3416
|
spacing: 2,
|
|
@@ -3287,8 +3421,8 @@ function SamplesDrawer({
|
|
|
3287
3421
|
}
|
|
3288
3422
|
}
|
|
3289
3423
|
},
|
|
3290
|
-
/* @__PURE__ */
|
|
3291
|
-
loadTemplates && /* @__PURE__ */
|
|
3424
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
|
|
3425
|
+
loadTemplates && /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
3292
3426
|
material.Typography,
|
|
3293
3427
|
{
|
|
3294
3428
|
variant: "subtitle2",
|
|
@@ -3296,7 +3430,7 @@ function SamplesDrawer({
|
|
|
3296
3430
|
sx: { fontWeight: "bold", mt: 2 }
|
|
3297
3431
|
},
|
|
3298
3432
|
"Your Templates"
|
|
3299
|
-
), loadingTemplates ? /* @__PURE__ */
|
|
3433
|
+
), loadingTemplates ? /* @__PURE__ */ React82__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React82__default.default.createElement(material.CircularProgress, { size: 24 })) : templates.length > 0 ? /* @__PURE__ */ React82__default.default.createElement(material.Stack, { alignItems: "flex-start", width: "100%" }, templates.map((template) => /* @__PURE__ */ React82__default.default.createElement(
|
|
3300
3434
|
material.Box,
|
|
3301
3435
|
{
|
|
3302
3436
|
key: template.id,
|
|
@@ -3311,7 +3445,7 @@ function SamplesDrawer({
|
|
|
3311
3445
|
}
|
|
3312
3446
|
}
|
|
3313
3447
|
},
|
|
3314
|
-
/* @__PURE__ */
|
|
3448
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
3315
3449
|
SidebarButton,
|
|
3316
3450
|
{
|
|
3317
3451
|
templateId: template.id,
|
|
@@ -3320,15 +3454,15 @@ function SamplesDrawer({
|
|
|
3320
3454
|
},
|
|
3321
3455
|
template.name
|
|
3322
3456
|
)
|
|
3323
|
-
))) : /* @__PURE__ */
|
|
3457
|
+
))) : /* @__PURE__ */ React82__default.default.createElement(
|
|
3324
3458
|
material.Typography,
|
|
3325
3459
|
{
|
|
3326
3460
|
variant: "body2",
|
|
3327
3461
|
sx: { color: "text.secondary", py: 1 }
|
|
3328
3462
|
},
|
|
3329
3463
|
"No saved templates"
|
|
3330
|
-
), /* @__PURE__ */
|
|
3331
|
-
/* @__PURE__ */
|
|
3464
|
+
), /* @__PURE__ */ React82__default.default.createElement(material.Divider, null)),
|
|
3465
|
+
/* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
3332
3466
|
material.Typography,
|
|
3333
3467
|
{
|
|
3334
3468
|
variant: "subtitle2",
|
|
@@ -3336,7 +3470,7 @@ function SamplesDrawer({
|
|
|
3336
3470
|
sx: { fontWeight: "bold", mt: 1 }
|
|
3337
3471
|
},
|
|
3338
3472
|
"Sample Templates"
|
|
3339
|
-
), loadingSamples ? /* @__PURE__ */
|
|
3473
|
+
), loadingSamples ? /* @__PURE__ */ React82__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React82__default.default.createElement(material.CircularProgress, { size: 24 })) : /* @__PURE__ */ React82__default.default.createElement(material.Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React82__default.default.createElement(
|
|
3340
3474
|
SidebarButton,
|
|
3341
3475
|
{
|
|
3342
3476
|
key: sample.id,
|
|
@@ -3361,7 +3495,7 @@ var ICON_SX = {
|
|
|
3361
3495
|
borderColor: "cadet.300"
|
|
3362
3496
|
};
|
|
3363
3497
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
3364
|
-
return /* @__PURE__ */
|
|
3498
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3365
3499
|
material.Button,
|
|
3366
3500
|
{
|
|
3367
3501
|
sx: BUTTON_SX2,
|
|
@@ -3370,14 +3504,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
3370
3504
|
onClick();
|
|
3371
3505
|
}
|
|
3372
3506
|
},
|
|
3373
|
-
/* @__PURE__ */
|
|
3374
|
-
/* @__PURE__ */
|
|
3507
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
3508
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
3375
3509
|
);
|
|
3376
3510
|
}
|
|
3377
3511
|
var BUTTONS = [
|
|
3378
3512
|
{
|
|
3379
3513
|
label: "Heading",
|
|
3380
|
-
icon: /* @__PURE__ */
|
|
3514
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
3381
3515
|
block: () => ({
|
|
3382
3516
|
type: "Heading",
|
|
3383
3517
|
data: {
|
|
@@ -3390,7 +3524,7 @@ var BUTTONS = [
|
|
|
3390
3524
|
},
|
|
3391
3525
|
{
|
|
3392
3526
|
label: "Text",
|
|
3393
|
-
icon: /* @__PURE__ */
|
|
3527
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
3394
3528
|
block: () => ({
|
|
3395
3529
|
type: "Text",
|
|
3396
3530
|
data: {
|
|
@@ -3404,7 +3538,7 @@ var BUTTONS = [
|
|
|
3404
3538
|
},
|
|
3405
3539
|
{
|
|
3406
3540
|
label: "Button",
|
|
3407
|
-
icon: /* @__PURE__ */
|
|
3541
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
3408
3542
|
block: () => ({
|
|
3409
3543
|
type: "Button",
|
|
3410
3544
|
data: {
|
|
@@ -3418,7 +3552,7 @@ var BUTTONS = [
|
|
|
3418
3552
|
},
|
|
3419
3553
|
{
|
|
3420
3554
|
label: "Image",
|
|
3421
|
-
icon: /* @__PURE__ */
|
|
3555
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
3422
3556
|
block: () => ({
|
|
3423
3557
|
type: "Image",
|
|
3424
3558
|
data: {
|
|
@@ -3434,7 +3568,7 @@ var BUTTONS = [
|
|
|
3434
3568
|
},
|
|
3435
3569
|
{
|
|
3436
3570
|
label: "Avatar",
|
|
3437
|
-
icon: /* @__PURE__ */
|
|
3571
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
3438
3572
|
block: () => ({
|
|
3439
3573
|
type: "Avatar",
|
|
3440
3574
|
data: {
|
|
@@ -3448,7 +3582,7 @@ var BUTTONS = [
|
|
|
3448
3582
|
},
|
|
3449
3583
|
{
|
|
3450
3584
|
label: "Divider",
|
|
3451
|
-
icon: /* @__PURE__ */
|
|
3585
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
3452
3586
|
block: () => ({
|
|
3453
3587
|
type: "Divider",
|
|
3454
3588
|
data: {
|
|
@@ -3461,7 +3595,7 @@ var BUTTONS = [
|
|
|
3461
3595
|
},
|
|
3462
3596
|
{
|
|
3463
3597
|
label: "Spacer",
|
|
3464
|
-
icon: /* @__PURE__ */
|
|
3598
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
3465
3599
|
block: () => ({
|
|
3466
3600
|
type: "Spacer",
|
|
3467
3601
|
data: {}
|
|
@@ -3469,7 +3603,7 @@ var BUTTONS = [
|
|
|
3469
3603
|
},
|
|
3470
3604
|
{
|
|
3471
3605
|
label: "Html",
|
|
3472
|
-
icon: /* @__PURE__ */
|
|
3606
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
3473
3607
|
block: () => ({
|
|
3474
3608
|
type: "Html",
|
|
3475
3609
|
data: {
|
|
@@ -3484,7 +3618,7 @@ var BUTTONS = [
|
|
|
3484
3618
|
},
|
|
3485
3619
|
{
|
|
3486
3620
|
label: "Columns",
|
|
3487
|
-
icon: /* @__PURE__ */
|
|
3621
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
3488
3622
|
block: () => ({
|
|
3489
3623
|
type: "ColumnsContainer",
|
|
3490
3624
|
data: {
|
|
@@ -3499,7 +3633,7 @@ var BUTTONS = [
|
|
|
3499
3633
|
},
|
|
3500
3634
|
{
|
|
3501
3635
|
label: "Container",
|
|
3502
|
-
icon: /* @__PURE__ */
|
|
3636
|
+
icon: /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
3503
3637
|
block: () => ({
|
|
3504
3638
|
type: "Container",
|
|
3505
3639
|
data: {
|
|
@@ -3523,7 +3657,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
3523
3657
|
if (anchorEl === null) {
|
|
3524
3658
|
return null;
|
|
3525
3659
|
}
|
|
3526
|
-
return /* @__PURE__ */
|
|
3660
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3527
3661
|
material.Menu,
|
|
3528
3662
|
{
|
|
3529
3663
|
open: true,
|
|
@@ -3532,12 +3666,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
3532
3666
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3533
3667
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
3534
3668
|
},
|
|
3535
|
-
/* @__PURE__ */
|
|
3669
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React82__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
|
|
3536
3670
|
);
|
|
3537
3671
|
}
|
|
3538
3672
|
function DividerButton({ buttonElement, onClick }) {
|
|
3539
|
-
const [visible, setVisible] =
|
|
3540
|
-
|
|
3673
|
+
const [visible, setVisible] = React82.useState(false);
|
|
3674
|
+
React82.useEffect(() => {
|
|
3541
3675
|
function listener({ clientX, clientY }) {
|
|
3542
3676
|
if (!buttonElement) {
|
|
3543
3677
|
return;
|
|
@@ -3559,7 +3693,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
3559
3693
|
window.removeEventListener("mousemove", listener);
|
|
3560
3694
|
};
|
|
3561
3695
|
}, [buttonElement, setVisible]);
|
|
3562
|
-
return /* @__PURE__ */
|
|
3696
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React82__default.default.createElement(
|
|
3563
3697
|
material.IconButton,
|
|
3564
3698
|
{
|
|
3565
3699
|
size: "small",
|
|
@@ -3582,11 +3716,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
3582
3716
|
onClick();
|
|
3583
3717
|
}
|
|
3584
3718
|
},
|
|
3585
|
-
/* @__PURE__ */
|
|
3719
|
+
/* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
3586
3720
|
));
|
|
3587
3721
|
}
|
|
3588
3722
|
function PlaceholderButton({ onClick }) {
|
|
3589
|
-
return /* @__PURE__ */
|
|
3723
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3590
3724
|
material.ButtonBase,
|
|
3591
3725
|
{
|
|
3592
3726
|
onClick: (ev) => {
|
|
@@ -3602,7 +3736,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
3602
3736
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
3603
3737
|
}
|
|
3604
3738
|
},
|
|
3605
|
-
/* @__PURE__ */
|
|
3739
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
3606
3740
|
iconsMaterial.AddOutlined,
|
|
3607
3741
|
{
|
|
3608
3742
|
sx: {
|
|
@@ -3619,19 +3753,19 @@ function PlaceholderButton({ onClick }) {
|
|
|
3619
3753
|
|
|
3620
3754
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
3621
3755
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
3622
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
3623
|
-
const [buttonElement, setButtonElement] =
|
|
3756
|
+
const [menuAnchorEl, setMenuAnchorEl] = React82.useState(null);
|
|
3757
|
+
const [buttonElement, setButtonElement] = React82.useState(null);
|
|
3624
3758
|
const handleButtonClick = () => {
|
|
3625
3759
|
setMenuAnchorEl(buttonElement);
|
|
3626
3760
|
};
|
|
3627
|
-
const
|
|
3761
|
+
const renderButton2 = () => {
|
|
3628
3762
|
if (placeholder) {
|
|
3629
|
-
return /* @__PURE__ */
|
|
3763
|
+
return /* @__PURE__ */ React82__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
3630
3764
|
} else {
|
|
3631
|
-
return /* @__PURE__ */
|
|
3765
|
+
return /* @__PURE__ */ React82__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
3632
3766
|
}
|
|
3633
3767
|
};
|
|
3634
|
-
return /* @__PURE__ */
|
|
3768
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React82__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
3635
3769
|
}
|
|
3636
3770
|
|
|
3637
3771
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -3658,9 +3792,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
|
|
|
3658
3792
|
});
|
|
3659
3793
|
};
|
|
3660
3794
|
if (!childrenIds || childrenIds.length === 0) {
|
|
3661
|
-
return /* @__PURE__ */
|
|
3795
|
+
return /* @__PURE__ */ React82__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
|
|
3662
3796
|
}
|
|
3663
|
-
return /* @__PURE__ */
|
|
3797
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React82__default.default.createElement(React82.Fragment, { key: childId }, /* @__PURE__ */ React82__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React82__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React82__default.default.createElement(AddBlockButton, { onSelect: appendBlock }));
|
|
3664
3798
|
}
|
|
3665
3799
|
|
|
3666
3800
|
// src/editor/blocks/columns-container/columns-container-editor.tsx
|
|
@@ -3687,15 +3821,15 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
3687
3821
|
});
|
|
3688
3822
|
setSelectedBlockId(blockId);
|
|
3689
3823
|
};
|
|
3690
|
-
return /* @__PURE__ */
|
|
3824
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3691
3825
|
columns_container_default,
|
|
3692
3826
|
{
|
|
3693
3827
|
props: restProps,
|
|
3694
3828
|
style,
|
|
3695
3829
|
columns: [
|
|
3696
|
-
/* @__PURE__ */
|
|
3697
|
-
/* @__PURE__ */
|
|
3698
|
-
/* @__PURE__ */
|
|
3830
|
+
/* @__PURE__ */ React82__default.default.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
|
|
3831
|
+
/* @__PURE__ */ React82__default.default.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
|
|
3832
|
+
/* @__PURE__ */ React82__default.default.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
|
|
3699
3833
|
]
|
|
3700
3834
|
}
|
|
3701
3835
|
);
|
|
@@ -3705,7 +3839,7 @@ function ContainerEditor({ style, props }) {
|
|
|
3705
3839
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
3706
3840
|
const document2 = useDocument();
|
|
3707
3841
|
const currentBlockId = useCurrentBlockId();
|
|
3708
|
-
return /* @__PURE__ */
|
|
3842
|
+
return /* @__PURE__ */ React82__default.default.createElement(container_default, { style }, /* @__PURE__ */ React82__default.default.createElement(
|
|
3709
3843
|
EditorChildrenIds,
|
|
3710
3844
|
{
|
|
3711
3845
|
childrenIds,
|
|
@@ -3752,7 +3886,7 @@ function EmailLayoutEditor(props) {
|
|
|
3752
3886
|
const childrenIds = (_a = props.childrenIds) != null ? _a : [];
|
|
3753
3887
|
const document2 = useDocument();
|
|
3754
3888
|
const currentBlockId = useCurrentBlockId();
|
|
3755
|
-
return /* @__PURE__ */
|
|
3889
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3756
3890
|
"div",
|
|
3757
3891
|
{
|
|
3758
3892
|
onClick: () => {
|
|
@@ -3772,7 +3906,7 @@ function EmailLayoutEditor(props) {
|
|
|
3772
3906
|
minHeight: "100%"
|
|
3773
3907
|
}
|
|
3774
3908
|
},
|
|
3775
|
-
/* @__PURE__ */
|
|
3909
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
3776
3910
|
"table",
|
|
3777
3911
|
{
|
|
3778
3912
|
align: "center",
|
|
@@ -3795,7 +3929,7 @@ function EmailLayoutEditor(props) {
|
|
|
3795
3929
|
cellPadding: "0",
|
|
3796
3930
|
border: 0
|
|
3797
3931
|
},
|
|
3798
|
-
/* @__PURE__ */
|
|
3932
|
+
/* @__PURE__ */ React82__default.default.createElement("tbody", null, /* @__PURE__ */ React82__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React82__default.default.createElement("td", null, /* @__PURE__ */ React82__default.default.createElement(
|
|
3799
3933
|
EditorChildrenIds,
|
|
3800
3934
|
{
|
|
3801
3935
|
childrenIds,
|
|
@@ -3939,13 +4073,13 @@ function TuneMenu({ blockId }) {
|
|
|
3939
4073
|
resetDocument(nDocument);
|
|
3940
4074
|
setSelectedBlockId(blockId);
|
|
3941
4075
|
};
|
|
3942
|
-
return /* @__PURE__ */
|
|
4076
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React82__default.default.createElement(material.Stack, null, /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React82__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React82__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React82__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
|
|
3943
4077
|
}
|
|
3944
4078
|
|
|
3945
4079
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
3946
4080
|
function EditorBlockWrapper({ children }) {
|
|
3947
4081
|
const selectedBlockId = useSelectedBlockId();
|
|
3948
|
-
const [mouseInside, setMouseInside] =
|
|
4082
|
+
const [mouseInside, setMouseInside] = React82.useState(false);
|
|
3949
4083
|
const blockId = useCurrentBlockId();
|
|
3950
4084
|
let outline;
|
|
3951
4085
|
if (selectedBlockId === blockId) {
|
|
@@ -3957,9 +4091,9 @@ function EditorBlockWrapper({ children }) {
|
|
|
3957
4091
|
if (selectedBlockId !== blockId) {
|
|
3958
4092
|
return null;
|
|
3959
4093
|
}
|
|
3960
|
-
return /* @__PURE__ */
|
|
4094
|
+
return /* @__PURE__ */ React82__default.default.createElement(TuneMenu, { blockId });
|
|
3961
4095
|
};
|
|
3962
|
-
return /* @__PURE__ */
|
|
4096
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
3963
4097
|
material.Box,
|
|
3964
4098
|
{
|
|
3965
4099
|
sx: {
|
|
@@ -4054,10 +4188,10 @@ function HeadingEditor({ style, props }) {
|
|
|
4054
4188
|
const isSelected = selectedBlockId === blockId;
|
|
4055
4189
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
4056
4190
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
4057
|
-
const [localText, setLocalText] =
|
|
4191
|
+
const [localText, setLocalText] = React82.useState(textContent);
|
|
4058
4192
|
const rootBlock = document2.root;
|
|
4059
4193
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily7(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
4060
|
-
|
|
4194
|
+
React82.useEffect(() => {
|
|
4061
4195
|
setLocalText(textContent);
|
|
4062
4196
|
}, [textContent]);
|
|
4063
4197
|
const fontFamily = getFontFamily7(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -4106,7 +4240,7 @@ function HeadingEditor({ style, props }) {
|
|
|
4106
4240
|
}
|
|
4107
4241
|
};
|
|
4108
4242
|
if (isSelected) {
|
|
4109
|
-
return /* @__PURE__ */
|
|
4243
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
4110
4244
|
"textarea",
|
|
4111
4245
|
{
|
|
4112
4246
|
value: localText,
|
|
@@ -4121,11 +4255,11 @@ function HeadingEditor({ style, props }) {
|
|
|
4121
4255
|
}
|
|
4122
4256
|
switch (level) {
|
|
4123
4257
|
case "h1":
|
|
4124
|
-
return /* @__PURE__ */
|
|
4258
|
+
return /* @__PURE__ */ React82__default.default.createElement("h1", { style: hStyle }, textContent);
|
|
4125
4259
|
case "h2":
|
|
4126
|
-
return /* @__PURE__ */
|
|
4260
|
+
return /* @__PURE__ */ React82__default.default.createElement("h2", { style: hStyle }, textContent);
|
|
4127
4261
|
case "h3":
|
|
4128
|
-
return /* @__PURE__ */
|
|
4262
|
+
return /* @__PURE__ */ React82__default.default.createElement("h3", { style: hStyle }, textContent);
|
|
4129
4263
|
}
|
|
4130
4264
|
}
|
|
4131
4265
|
function getFontFamily8(fontFamily) {
|
|
@@ -4186,11 +4320,11 @@ function TextEditor({ style, props }) {
|
|
|
4186
4320
|
const document2 = useDocument();
|
|
4187
4321
|
const isSelected = selectedBlockId === blockId;
|
|
4188
4322
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
4189
|
-
const [localText, setLocalText] =
|
|
4323
|
+
const [localText, setLocalText] = React82.useState(textContent);
|
|
4190
4324
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
4191
4325
|
const rootBlock = document2.root;
|
|
4192
4326
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily8(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
4193
|
-
|
|
4327
|
+
React82.useEffect(() => {
|
|
4194
4328
|
setLocalText(textContent);
|
|
4195
4329
|
}, [textContent]);
|
|
4196
4330
|
const fontFamily = getFontFamily8(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -4241,7 +4375,7 @@ function TextEditor({ style, props }) {
|
|
|
4241
4375
|
}
|
|
4242
4376
|
};
|
|
4243
4377
|
if (isSelected && !isMarkdown) {
|
|
4244
|
-
return /* @__PURE__ */
|
|
4378
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
4245
4379
|
"textarea",
|
|
4246
4380
|
{
|
|
4247
4381
|
value: localText,
|
|
@@ -4255,36 +4389,36 @@ function TextEditor({ style, props }) {
|
|
|
4255
4389
|
);
|
|
4256
4390
|
}
|
|
4257
4391
|
if (isMarkdown) {
|
|
4258
|
-
return /* @__PURE__ */
|
|
4392
|
+
return /* @__PURE__ */ React82__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
|
|
4259
4393
|
}
|
|
4260
|
-
return /* @__PURE__ */
|
|
4394
|
+
return /* @__PURE__ */ React82__default.default.createElement("div", { style: wStyle }, textContent);
|
|
4261
4395
|
}
|
|
4262
4396
|
|
|
4263
4397
|
// src/editor/core.tsx
|
|
4264
4398
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
4265
4399
|
Avatar: {
|
|
4266
4400
|
schema: AvatarPropsSchema,
|
|
4267
|
-
Component: (props) => /* @__PURE__ */
|
|
4401
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
4268
4402
|
},
|
|
4269
4403
|
Button: {
|
|
4270
4404
|
schema: ButtonPropsSchema,
|
|
4271
|
-
Component: (props) => /* @__PURE__ */
|
|
4405
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(button_default, __spreadValues({}, props)))
|
|
4272
4406
|
},
|
|
4273
4407
|
Container: {
|
|
4274
4408
|
schema: container_props_schema_default,
|
|
4275
|
-
Component: (props) => /* @__PURE__ */
|
|
4409
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
4276
4410
|
},
|
|
4277
4411
|
ColumnsContainer: {
|
|
4278
4412
|
schema: columns_container_props_schema_default2,
|
|
4279
|
-
Component: (props) => /* @__PURE__ */
|
|
4413
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
4280
4414
|
},
|
|
4281
4415
|
Heading: {
|
|
4282
4416
|
schema: HeadingPropsSchema,
|
|
4283
|
-
Component: (props) => /* @__PURE__ */
|
|
4417
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
4284
4418
|
},
|
|
4285
4419
|
Html: {
|
|
4286
4420
|
schema: HtmlPropsSchema,
|
|
4287
|
-
Component: (props) => /* @__PURE__ */
|
|
4421
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(html_default, __spreadValues({}, props)))
|
|
4288
4422
|
},
|
|
4289
4423
|
Image: {
|
|
4290
4424
|
schema: ImagePropsSchema,
|
|
@@ -4295,24 +4429,24 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
4295
4429
|
url: (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image"
|
|
4296
4430
|
})
|
|
4297
4431
|
});
|
|
4298
|
-
return /* @__PURE__ */
|
|
4432
|
+
return /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
4299
4433
|
}
|
|
4300
4434
|
},
|
|
4301
4435
|
Text: {
|
|
4302
4436
|
schema: TextPropsSchema,
|
|
4303
|
-
Component: (props) => /* @__PURE__ */
|
|
4437
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
4304
4438
|
},
|
|
4305
4439
|
EmailLayout: {
|
|
4306
4440
|
schema: email_layout_props_schema_default,
|
|
4307
|
-
Component: (p) => /* @__PURE__ */
|
|
4441
|
+
Component: (p) => /* @__PURE__ */ React82__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
4308
4442
|
},
|
|
4309
4443
|
Spacer: {
|
|
4310
4444
|
schema: SpacerPropsSchema,
|
|
4311
|
-
Component: (props) => /* @__PURE__ */
|
|
4445
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
4312
4446
|
},
|
|
4313
4447
|
Divider: {
|
|
4314
4448
|
schema: DividerPropsSchema,
|
|
4315
|
-
Component: (props) => /* @__PURE__ */
|
|
4449
|
+
Component: (props) => /* @__PURE__ */ React82__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
4316
4450
|
}
|
|
4317
4451
|
});
|
|
4318
4452
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -4320,15 +4454,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
4320
4454
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
4321
4455
|
|
|
4322
4456
|
// src/editor/editor-block.tsx
|
|
4323
|
-
var EditorBlockContext =
|
|
4324
|
-
var useCurrentBlockId = () =>
|
|
4457
|
+
var EditorBlockContext = React82.createContext(null);
|
|
4458
|
+
var useCurrentBlockId = () => React82.useContext(EditorBlockContext);
|
|
4325
4459
|
function EditorBlock({ id }) {
|
|
4326
4460
|
const document2 = useDocument();
|
|
4327
4461
|
const block = document2[id];
|
|
4328
4462
|
if (!block) {
|
|
4329
4463
|
throw new Error("Could not find block");
|
|
4330
4464
|
}
|
|
4331
|
-
return /* @__PURE__ */
|
|
4465
|
+
return /* @__PURE__ */ React82__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React82__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
4332
4466
|
}
|
|
4333
4467
|
function ToggleInspectorPanelButton() {
|
|
4334
4468
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -4336,20 +4470,20 @@ function ToggleInspectorPanelButton() {
|
|
|
4336
4470
|
toggleInspectorDrawerOpen();
|
|
4337
4471
|
};
|
|
4338
4472
|
if (inspectorDrawerOpen) {
|
|
4339
|
-
return /* @__PURE__ */
|
|
4473
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
4340
4474
|
}
|
|
4341
|
-
return /* @__PURE__ */
|
|
4475
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
4342
4476
|
}
|
|
4343
4477
|
function useIcon() {
|
|
4344
4478
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
4345
4479
|
if (samplesDrawerOpen) {
|
|
4346
|
-
return /* @__PURE__ */
|
|
4480
|
+
return /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
4347
4481
|
}
|
|
4348
|
-
return /* @__PURE__ */
|
|
4482
|
+
return /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
4349
4483
|
}
|
|
4350
4484
|
function ToggleSamplesPanelButton() {
|
|
4351
4485
|
const icon = useIcon();
|
|
4352
|
-
return /* @__PURE__ */
|
|
4486
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
4353
4487
|
}
|
|
4354
4488
|
function formatHtml(html2, spaces = 2) {
|
|
4355
4489
|
try {
|
|
@@ -4397,8 +4531,8 @@ function json(value) {
|
|
|
4397
4531
|
|
|
4398
4532
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
4399
4533
|
function HighlightedCodePanel({ type, value }) {
|
|
4400
|
-
const [code, setCode] =
|
|
4401
|
-
|
|
4534
|
+
const [code, setCode] = React82.useState(null);
|
|
4535
|
+
React82.useEffect(() => {
|
|
4402
4536
|
switch (type) {
|
|
4403
4537
|
case "html":
|
|
4404
4538
|
html(value).then(setCode);
|
|
@@ -4411,7 +4545,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
4411
4545
|
if (code === null) {
|
|
4412
4546
|
return null;
|
|
4413
4547
|
}
|
|
4414
|
-
return /* @__PURE__ */
|
|
4548
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
4415
4549
|
"pre",
|
|
4416
4550
|
{
|
|
4417
4551
|
style: {
|
|
@@ -4436,13 +4570,37 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
4436
4570
|
// src/app/email-canvas/html-panel.tsx
|
|
4437
4571
|
function HtmlPanel() {
|
|
4438
4572
|
const document2 = useDocument();
|
|
4439
|
-
const code =
|
|
4440
|
-
return /* @__PURE__ */
|
|
4573
|
+
const code = React82.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
4574
|
+
return /* @__PURE__ */ React82__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
4441
4575
|
}
|
|
4442
4576
|
function JsonPanel() {
|
|
4443
4577
|
const document2 = useDocument();
|
|
4444
|
-
const code =
|
|
4445
|
-
return /* @__PURE__ */
|
|
4578
|
+
const code = React82.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
4579
|
+
return /* @__PURE__ */ React82__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
4580
|
+
}
|
|
4581
|
+
function TextPanel() {
|
|
4582
|
+
const document2 = useDocument();
|
|
4583
|
+
const text = React82.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
4584
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
4585
|
+
"pre",
|
|
4586
|
+
{
|
|
4587
|
+
style: {
|
|
4588
|
+
margin: 0,
|
|
4589
|
+
padding: 16,
|
|
4590
|
+
overflowX: "auto",
|
|
4591
|
+
whiteSpace: "pre-wrap",
|
|
4592
|
+
fontSize: "13px",
|
|
4593
|
+
fontFamily: "monospace",
|
|
4594
|
+
lineHeight: "1.5"
|
|
4595
|
+
},
|
|
4596
|
+
onClick: (ev) => {
|
|
4597
|
+
const s = window.getSelection();
|
|
4598
|
+
if (s === null) return;
|
|
4599
|
+
s.selectAllChildren(ev.currentTarget);
|
|
4600
|
+
}
|
|
4601
|
+
},
|
|
4602
|
+
text
|
|
4603
|
+
);
|
|
4446
4604
|
}
|
|
4447
4605
|
function MainTabsGroup() {
|
|
4448
4606
|
const selectedMainTab = useSelectedMainTab();
|
|
@@ -4452,49 +4610,56 @@ function MainTabsGroup() {
|
|
|
4452
4610
|
case "preview":
|
|
4453
4611
|
case "editor":
|
|
4454
4612
|
case "html":
|
|
4613
|
+
case "text":
|
|
4455
4614
|
setSelectedMainTab(v);
|
|
4456
4615
|
return;
|
|
4457
4616
|
default:
|
|
4458
4617
|
setSelectedMainTab("editor");
|
|
4459
4618
|
}
|
|
4460
4619
|
};
|
|
4461
|
-
return /* @__PURE__ */
|
|
4620
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React82__default.default.createElement(
|
|
4462
4621
|
material.Tab,
|
|
4463
4622
|
{
|
|
4464
4623
|
value: "editor",
|
|
4465
|
-
label: /* @__PURE__ */
|
|
4624
|
+
label: /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
4466
4625
|
}
|
|
4467
|
-
), /* @__PURE__ */
|
|
4626
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4468
4627
|
material.Tab,
|
|
4469
4628
|
{
|
|
4470
4629
|
value: "preview",
|
|
4471
|
-
label: /* @__PURE__ */
|
|
4630
|
+
label: /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
4472
4631
|
}
|
|
4473
|
-
), /* @__PURE__ */
|
|
4632
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4474
4633
|
material.Tab,
|
|
4475
4634
|
{
|
|
4476
4635
|
value: "html",
|
|
4477
|
-
label: /* @__PURE__ */
|
|
4636
|
+
label: /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
4478
4637
|
}
|
|
4479
|
-
), /* @__PURE__ */
|
|
4638
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4639
|
+
material.Tab,
|
|
4640
|
+
{
|
|
4641
|
+
value: "text",
|
|
4642
|
+
label: /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
4643
|
+
}
|
|
4644
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4480
4645
|
material.Tab,
|
|
4481
4646
|
{
|
|
4482
4647
|
value: "json",
|
|
4483
|
-
label: /* @__PURE__ */
|
|
4648
|
+
label: /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
4484
4649
|
}
|
|
4485
4650
|
));
|
|
4486
4651
|
}
|
|
4487
|
-
var SnackbarContext =
|
|
4652
|
+
var SnackbarContext = React82.createContext(null);
|
|
4488
4653
|
function useSnackbar() {
|
|
4489
|
-
const context =
|
|
4654
|
+
const context = React82.useContext(SnackbarContext);
|
|
4490
4655
|
if (!context) {
|
|
4491
4656
|
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
4492
4657
|
}
|
|
4493
4658
|
return context;
|
|
4494
4659
|
}
|
|
4495
4660
|
function SnackbarProvider({ children }) {
|
|
4496
|
-
const [message, setMessage] =
|
|
4497
|
-
const [duration, setDuration] =
|
|
4661
|
+
const [message, setMessage] = React82.useState(null);
|
|
4662
|
+
const [duration, setDuration] = React82.useState(3e3);
|
|
4498
4663
|
const showMessage = (text, customDuration = 3e3) => {
|
|
4499
4664
|
setMessage(text);
|
|
4500
4665
|
setDuration(customDuration);
|
|
@@ -4502,7 +4667,7 @@ function SnackbarProvider({ children }) {
|
|
|
4502
4667
|
const handleClose = () => {
|
|
4503
4668
|
setMessage(null);
|
|
4504
4669
|
};
|
|
4505
|
-
return /* @__PURE__ */
|
|
4670
|
+
return /* @__PURE__ */ React82__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React82__default.default.createElement(
|
|
4506
4671
|
material.Snackbar,
|
|
4507
4672
|
{
|
|
4508
4673
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4527,10 +4692,10 @@ function SaveTemplateDialog({
|
|
|
4527
4692
|
defaultName = "",
|
|
4528
4693
|
error: externalError = null
|
|
4529
4694
|
}) {
|
|
4530
|
-
const [templateName, setTemplateName] =
|
|
4531
|
-
const [internalError, setInternalError] =
|
|
4532
|
-
const [isSubmitting, setIsSubmitting] =
|
|
4533
|
-
|
|
4695
|
+
const [templateName, setTemplateName] = React82.useState(defaultName);
|
|
4696
|
+
const [internalError, setInternalError] = React82.useState("");
|
|
4697
|
+
const [isSubmitting, setIsSubmitting] = React82.useState(false);
|
|
4698
|
+
React82.useEffect(() => {
|
|
4534
4699
|
if (open) {
|
|
4535
4700
|
setTemplateName(defaultName);
|
|
4536
4701
|
setInternalError("");
|
|
@@ -4578,7 +4743,7 @@ function SaveTemplateDialog({
|
|
|
4578
4743
|
setInternalError("");
|
|
4579
4744
|
onClose();
|
|
4580
4745
|
};
|
|
4581
|
-
return /* @__PURE__ */
|
|
4746
|
+
return /* @__PURE__ */ React82__default.default.createElement(
|
|
4582
4747
|
material.Dialog,
|
|
4583
4748
|
{
|
|
4584
4749
|
open,
|
|
@@ -4586,8 +4751,8 @@ function SaveTemplateDialog({
|
|
|
4586
4751
|
maxWidth: "sm",
|
|
4587
4752
|
fullWidth: true
|
|
4588
4753
|
},
|
|
4589
|
-
/* @__PURE__ */
|
|
4590
|
-
/* @__PURE__ */
|
|
4754
|
+
/* @__PURE__ */ React82__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
|
|
4755
|
+
/* @__PURE__ */ React82__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React82__default.default.createElement(
|
|
4591
4756
|
material.TextField,
|
|
4592
4757
|
{
|
|
4593
4758
|
autoFocus: true,
|
|
@@ -4609,7 +4774,7 @@ function SaveTemplateDialog({
|
|
|
4609
4774
|
disabled: isSubmitting
|
|
4610
4775
|
}
|
|
4611
4776
|
))),
|
|
4612
|
-
/* @__PURE__ */
|
|
4777
|
+
/* @__PURE__ */ React82__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React82__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React82__default.default.createElement(
|
|
4613
4778
|
material.Button,
|
|
4614
4779
|
{
|
|
4615
4780
|
onClick: handleSave,
|
|
@@ -4626,7 +4791,7 @@ function SaveTemplateDialog({
|
|
|
4626
4791
|
function SaveButton({ loadTemplates, saveAs }) {
|
|
4627
4792
|
const { saveTemplate, currentTemplateId, setCurrentTemplate } = useEmailEditor();
|
|
4628
4793
|
const { showMessage } = useSnackbar();
|
|
4629
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
4794
|
+
const [saveDialogOpen, setSaveDialogOpen] = React82.useState(false);
|
|
4630
4795
|
const document2 = useDocument();
|
|
4631
4796
|
const handleSave = () => __async(null, null, function* () {
|
|
4632
4797
|
try {
|
|
@@ -4664,7 +4829,7 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4664
4829
|
return false;
|
|
4665
4830
|
}
|
|
4666
4831
|
});
|
|
4667
|
-
return /* @__PURE__ */
|
|
4832
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
4668
4833
|
material.IconButton,
|
|
4669
4834
|
{
|
|
4670
4835
|
onClick: handleSave,
|
|
@@ -4675,8 +4840,8 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4675
4840
|
}
|
|
4676
4841
|
}
|
|
4677
4842
|
},
|
|
4678
|
-
/* @__PURE__ */
|
|
4679
|
-
), /* @__PURE__ */
|
|
4843
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Save template" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.SaveOutlined, { fontSize: "small" }))
|
|
4844
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4680
4845
|
SaveTemplateDialog,
|
|
4681
4846
|
{
|
|
4682
4847
|
open: saveDialogOpen,
|
|
@@ -4689,9 +4854,9 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4689
4854
|
function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
4690
4855
|
const { setCurrentTemplate, loadTemplate } = useEmailEditor();
|
|
4691
4856
|
const { showMessage } = useSnackbar();
|
|
4692
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
4693
|
-
const [templates, setTemplates] =
|
|
4694
|
-
const [nameError, setNameError] =
|
|
4857
|
+
const [saveDialogOpen, setSaveDialogOpen] = React82.useState(false);
|
|
4858
|
+
const [templates, setTemplates] = React82.useState([]);
|
|
4859
|
+
const [nameError, setNameError] = React82.useState(null);
|
|
4695
4860
|
const fetchTemplates = () => __async(null, null, function* () {
|
|
4696
4861
|
if (loadTemplates) {
|
|
4697
4862
|
try {
|
|
@@ -4746,7 +4911,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4746
4911
|
}
|
|
4747
4912
|
return false;
|
|
4748
4913
|
});
|
|
4749
|
-
return /* @__PURE__ */
|
|
4914
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
4750
4915
|
material.IconButton,
|
|
4751
4916
|
{
|
|
4752
4917
|
onClick: handleNewTemplate,
|
|
@@ -4757,8 +4922,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4757
4922
|
}
|
|
4758
4923
|
}
|
|
4759
4924
|
},
|
|
4760
|
-
/* @__PURE__ */
|
|
4761
|
-
), /* @__PURE__ */
|
|
4925
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.Add, { fontSize: "small" }))
|
|
4926
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4762
4927
|
SaveTemplateDialog,
|
|
4763
4928
|
{
|
|
4764
4929
|
open: saveDialogOpen,
|
|
@@ -4805,17 +4970,19 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
|
4805
4970
|
const renderMainPanel = () => {
|
|
4806
4971
|
switch (selectedMainTab) {
|
|
4807
4972
|
case "editor":
|
|
4808
|
-
return /* @__PURE__ */
|
|
4973
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React82__default.default.createElement(EditorBlock, { id: "root" }));
|
|
4809
4974
|
case "preview":
|
|
4810
|
-
return /* @__PURE__ */
|
|
4975
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React82__default.default.createElement(Reader, { document: document2, rootBlockId: "root" }));
|
|
4811
4976
|
case "html":
|
|
4812
|
-
return /* @__PURE__ */
|
|
4977
|
+
return /* @__PURE__ */ React82__default.default.createElement(HtmlPanel, null);
|
|
4978
|
+
case "text":
|
|
4979
|
+
return /* @__PURE__ */ React82__default.default.createElement(TextPanel, null);
|
|
4813
4980
|
case "json":
|
|
4814
|
-
return /* @__PURE__ */
|
|
4981
|
+
return /* @__PURE__ */ React82__default.default.createElement(JsonPanel, null);
|
|
4815
4982
|
}
|
|
4816
4983
|
};
|
|
4817
4984
|
const showSaveButtons = persistenceEnabled;
|
|
4818
|
-
return /* @__PURE__ */
|
|
4985
|
+
return /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
4819
4986
|
material.Stack,
|
|
4820
4987
|
{
|
|
4821
4988
|
sx: {
|
|
@@ -4832,10 +4999,10 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
|
4832
4999
|
justifyContent: "space-between",
|
|
4833
5000
|
alignItems: "center"
|
|
4834
5001
|
},
|
|
4835
|
-
/* @__PURE__ */
|
|
4836
|
-
/* @__PURE__ */
|
|
4837
|
-
/* @__PURE__ */
|
|
4838
|
-
), /* @__PURE__ */
|
|
5002
|
+
/* @__PURE__ */ React82__default.default.createElement(ToggleSamplesPanelButton, null),
|
|
5003
|
+
/* @__PURE__ */ React82__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React82__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React82__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React82__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React82__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React82__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React82__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React82__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React82__default.default.createElement(React82__default.default.Fragment, null, /* @__PURE__ */ React82__default.default.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React82__default.default.createElement(SaveButton, { loadTemplates, saveAs })))),
|
|
5004
|
+
/* @__PURE__ */ React82__default.default.createElement(ToggleInspectorPanelButton, null)
|
|
5005
|
+
), /* @__PURE__ */ React82__default.default.createElement(material.Box, { sx: {
|
|
4839
5006
|
paddingBottom: "50px",
|
|
4840
5007
|
minWidth: 370
|
|
4841
5008
|
} }, renderMainPanel()));
|
|
@@ -4874,7 +5041,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
4874
5041
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
4875
5042
|
});
|
|
4876
5043
|
}
|
|
4877
|
-
var EmailEditorInternal =
|
|
5044
|
+
var EmailEditorInternal = React82.forwardRef((props, ref) => {
|
|
4878
5045
|
const {
|
|
4879
5046
|
drawerEnterDuration = 225,
|
|
4880
5047
|
drawerExitDuration = 225,
|
|
@@ -4894,10 +5061,10 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4894
5061
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
4895
5062
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
4896
5063
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
4897
|
-
const onChangeRef =
|
|
5064
|
+
const onChangeRef = React82.useRef(onChange);
|
|
4898
5065
|
onChangeRef.current = onChange;
|
|
4899
|
-
const prevDocJsonRef =
|
|
4900
|
-
|
|
5066
|
+
const prevDocJsonRef = React82.useRef("");
|
|
5067
|
+
React82.useEffect(() => {
|
|
4901
5068
|
var _a;
|
|
4902
5069
|
const docJson = JSON.stringify(currentDocument);
|
|
4903
5070
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -4905,7 +5072,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4905
5072
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
4906
5073
|
}
|
|
4907
5074
|
}, [currentDocument]);
|
|
4908
|
-
|
|
5075
|
+
React82.useImperativeHandle(ref, () => ({
|
|
4909
5076
|
saveTemplate: () => {
|
|
4910
5077
|
return saveTemplate();
|
|
4911
5078
|
},
|
|
@@ -4917,7 +5084,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4917
5084
|
return getDocument();
|
|
4918
5085
|
}
|
|
4919
5086
|
}));
|
|
4920
|
-
return /* @__PURE__ */
|
|
5087
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React82__default.default.createElement(
|
|
4921
5088
|
InspectorDrawer,
|
|
4922
5089
|
{
|
|
4923
5090
|
enterDuration: drawerEnterDuration,
|
|
@@ -4925,7 +5092,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4925
5092
|
deleteTemplate,
|
|
4926
5093
|
copyTemplate
|
|
4927
5094
|
}
|
|
4928
|
-
), /* @__PURE__ */
|
|
5095
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4929
5096
|
SamplesDrawer,
|
|
4930
5097
|
{
|
|
4931
5098
|
enterDuration: drawerEnterDuration,
|
|
@@ -4937,7 +5104,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4937
5104
|
currentTemplateId,
|
|
4938
5105
|
deleteTemplate
|
|
4939
5106
|
}
|
|
4940
|
-
), /* @__PURE__ */
|
|
5107
|
+
), /* @__PURE__ */ React82__default.default.createElement(
|
|
4941
5108
|
material.Stack,
|
|
4942
5109
|
{
|
|
4943
5110
|
sx: {
|
|
@@ -4946,10 +5113,10 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
|
|
|
4946
5113
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
4947
5114
|
}
|
|
4948
5115
|
},
|
|
4949
|
-
/* @__PURE__ */
|
|
5116
|
+
/* @__PURE__ */ React82__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs })
|
|
4950
5117
|
));
|
|
4951
5118
|
});
|
|
4952
|
-
var EmailEditor =
|
|
5119
|
+
var EmailEditor = React82.forwardRef((props, ref) => {
|
|
4953
5120
|
const {
|
|
4954
5121
|
initialTemplate: initialTemplateProp,
|
|
4955
5122
|
initialTemplateId,
|
|
@@ -4969,21 +5136,19 @@ var EmailEditor = React81.forwardRef((props, ref) => {
|
|
|
4969
5136
|
saveAs,
|
|
4970
5137
|
theme
|
|
4971
5138
|
} = props;
|
|
4972
|
-
const resolvedTemplate =
|
|
5139
|
+
const resolvedTemplate = React82.useMemo(
|
|
4973
5140
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
4974
5141
|
[initialTemplateProp]
|
|
4975
5142
|
);
|
|
4976
|
-
const prevTemplateRef =
|
|
4977
|
-
|
|
4978
|
-
|
|
4979
|
-
|
|
4980
|
-
|
|
4981
|
-
|
|
4982
|
-
}, [resolvedTemplate]);
|
|
4983
|
-
React81.useEffect(() => {
|
|
5143
|
+
const prevTemplateRef = React82.useRef(void 0);
|
|
5144
|
+
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
5145
|
+
prevTemplateRef.current = resolvedTemplate;
|
|
5146
|
+
resetDocument(resolvedTemplate);
|
|
5147
|
+
}
|
|
5148
|
+
React82.useEffect(() => {
|
|
4984
5149
|
setPersistenceEnabled(persistenceEnabled);
|
|
4985
5150
|
}, [persistenceEnabled]);
|
|
4986
|
-
return /* @__PURE__ */
|
|
5151
|
+
return /* @__PURE__ */ React82__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React82__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React82__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React82__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React82__default.default.createElement(
|
|
4987
5152
|
EmailEditorProvider,
|
|
4988
5153
|
{
|
|
4989
5154
|
initialTemplate: resolvedTemplate,
|
|
@@ -4992,7 +5157,7 @@ var EmailEditor = React81.forwardRef((props, ref) => {
|
|
|
4992
5157
|
onSave,
|
|
4993
5158
|
onChange
|
|
4994
5159
|
},
|
|
4995
|
-
/* @__PURE__ */
|
|
5160
|
+
/* @__PURE__ */ React82__default.default.createElement(
|
|
4996
5161
|
EmailEditorInternal,
|
|
4997
5162
|
{
|
|
4998
5163
|
ref,
|
|
@@ -5068,6 +5233,7 @@ exports.buildBlockConfigurationDictionary = buildBlockConfigurationDictionary;
|
|
|
5068
5233
|
exports.buildBlockConfigurationSchema = buildBlockConfigurationSchema;
|
|
5069
5234
|
exports.htmlToEditorConfig = htmlToEditorConfig;
|
|
5070
5235
|
exports.renderToStaticMarkup = renderToStaticMarkup;
|
|
5236
|
+
exports.renderToText = renderToText;
|
|
5071
5237
|
exports.theme = theme_default;
|
|
5072
5238
|
exports.useEmailEditor = useEmailEditor;
|
|
5073
5239
|
//# sourceMappingURL=index.cjs.map
|