@kontakto/email-template-editor 2.3.1 → 2.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 +871 -727
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +678 -534
- 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 React57 = require('react');
|
|
6
6
|
var zod = require('zod');
|
|
7
7
|
var server = require('react-dom/server');
|
|
8
8
|
var Handlebars = require('handlebars');
|
|
@@ -19,7 +19,7 @@ var htmlfy = require('htmlfy');
|
|
|
19
19
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
20
20
|
|
|
21
21
|
var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
|
|
22
|
-
var
|
|
22
|
+
var React57__default = /*#__PURE__*/_interopDefault(React57);
|
|
23
23
|
var Handlebars__default = /*#__PURE__*/_interopDefault(Handlebars);
|
|
24
24
|
var hljs__default = /*#__PURE__*/_interopDefault(hljs);
|
|
25
25
|
var jsonHighlighter__default = /*#__PURE__*/_interopDefault(jsonHighlighter);
|
|
@@ -191,8 +191,8 @@ function renderInlineMarkdownString(str) {
|
|
|
191
191
|
}
|
|
192
192
|
function EmailMarkdown(_a) {
|
|
193
193
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
194
|
-
const data =
|
|
195
|
-
return /* @__PURE__ */
|
|
194
|
+
const data = React57.useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
195
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
196
196
|
}
|
|
197
197
|
var FONT_FAMILY_SCHEMA = zod.z.enum([
|
|
198
198
|
"MODERN_SANS",
|
|
@@ -272,9 +272,9 @@ function Text({ style, props }) {
|
|
|
272
272
|
};
|
|
273
273
|
const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
|
|
274
274
|
if (props == null ? void 0 : props.markdown) {
|
|
275
|
-
return /* @__PURE__ */
|
|
275
|
+
return /* @__PURE__ */ React57__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
276
276
|
}
|
|
277
|
-
return /* @__PURE__ */
|
|
277
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wStyle }, text);
|
|
278
278
|
}
|
|
279
279
|
var PADDING_SCHEMA2 = zod.z.object({
|
|
280
280
|
top: zod.z.number(),
|
|
@@ -323,7 +323,7 @@ function Avatar({ style, props }) {
|
|
|
323
323
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
324
324
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
325
325
|
};
|
|
326
|
-
return /* @__PURE__ */
|
|
326
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React57__default.default.createElement(
|
|
327
327
|
"img",
|
|
328
328
|
{
|
|
329
329
|
alt,
|
|
@@ -475,14 +475,14 @@ function Button({ style, props }) {
|
|
|
475
475
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
476
476
|
textDecoration: "none"
|
|
477
477
|
};
|
|
478
|
-
return /* @__PURE__ */
|
|
478
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
479
479
|
"span",
|
|
480
480
|
{
|
|
481
481
|
dangerouslySetInnerHTML: {
|
|
482
482
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
483
483
|
}
|
|
484
484
|
}
|
|
485
|
-
), /* @__PURE__ */
|
|
485
|
+
), /* @__PURE__ */ React57__default.default.createElement("span", null, text), /* @__PURE__ */ React57__default.default.createElement(
|
|
486
486
|
"span",
|
|
487
487
|
{
|
|
488
488
|
dangerouslySetInnerHTML: {
|
|
@@ -531,7 +531,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
531
531
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
532
532
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
533
533
|
};
|
|
534
|
-
return /* @__PURE__ */
|
|
534
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React57__default.default.createElement(
|
|
535
535
|
"table",
|
|
536
536
|
{
|
|
537
537
|
align: "center",
|
|
@@ -540,7 +540,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
540
540
|
border: 0,
|
|
541
541
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
542
542
|
},
|
|
543
|
-
/* @__PURE__ */
|
|
543
|
+
/* @__PURE__ */ React57__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React57__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React57__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React57__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React57__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
|
|
544
544
|
));
|
|
545
545
|
}
|
|
546
546
|
function TableCell({ index, props, columns }) {
|
|
@@ -558,7 +558,7 @@ function TableCell({ index, props, columns }) {
|
|
|
558
558
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
559
559
|
};
|
|
560
560
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
561
|
-
return /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ React57__default.default.createElement("td", { style }, children);
|
|
562
562
|
}
|
|
563
563
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
564
564
|
if (index === 0) {
|
|
@@ -620,9 +620,9 @@ function Container({ style, children }) {
|
|
|
620
620
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
621
621
|
};
|
|
622
622
|
if (!children) {
|
|
623
|
-
return /* @__PURE__ */
|
|
623
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wStyle });
|
|
624
624
|
}
|
|
625
|
-
return /* @__PURE__ */
|
|
625
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wStyle }, children);
|
|
626
626
|
}
|
|
627
627
|
var container_default = Container;
|
|
628
628
|
var COLOR_SCHEMA5 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -656,7 +656,7 @@ function Divider({ style, props }) {
|
|
|
656
656
|
};
|
|
657
657
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
658
658
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
659
|
-
return /* @__PURE__ */
|
|
659
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: st }, /* @__PURE__ */ React57__default.default.createElement(
|
|
660
660
|
"hr",
|
|
661
661
|
{
|
|
662
662
|
style: {
|
|
@@ -750,15 +750,15 @@ function Heading({ props, style }) {
|
|
|
750
750
|
fontSize: getFontSize(level),
|
|
751
751
|
padding: getPadding7(style == null ? void 0 : style.padding)
|
|
752
752
|
};
|
|
753
|
-
const html2 =
|
|
753
|
+
const html2 = React57.useMemo(() => isMarkdown ? renderInlineMarkdownString(text) : null, [isMarkdown, text]);
|
|
754
754
|
const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
|
|
755
755
|
switch (level) {
|
|
756
756
|
case "h1":
|
|
757
|
-
return /* @__PURE__ */
|
|
757
|
+
return /* @__PURE__ */ React57__default.default.createElement("h1", __spreadValues({}, renderProps));
|
|
758
758
|
case "h2":
|
|
759
|
-
return /* @__PURE__ */
|
|
759
|
+
return /* @__PURE__ */ React57__default.default.createElement("h2", __spreadValues({}, renderProps));
|
|
760
760
|
case "h3":
|
|
761
|
-
return /* @__PURE__ */
|
|
761
|
+
return /* @__PURE__ */ React57__default.default.createElement("h3", __spreadValues({}, renderProps));
|
|
762
762
|
}
|
|
763
763
|
}
|
|
764
764
|
function getFontSize(level) {
|
|
@@ -840,9 +840,9 @@ function Html({ style, props }) {
|
|
|
840
840
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
841
841
|
};
|
|
842
842
|
if (!children) {
|
|
843
|
-
return /* @__PURE__ */
|
|
843
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle });
|
|
844
844
|
}
|
|
845
|
-
return /* @__PURE__ */
|
|
845
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
846
846
|
}
|
|
847
847
|
var html_default = Html;
|
|
848
848
|
var PADDING_SCHEMA9 = zod.z.object({
|
|
@@ -878,7 +878,7 @@ function Image({ style, props }) {
|
|
|
878
878
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
879
879
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
880
880
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
881
|
-
const imageElement = /* @__PURE__ */
|
|
881
|
+
const imageElement = /* @__PURE__ */ React57__default.default.createElement(
|
|
882
882
|
"img",
|
|
883
883
|
{
|
|
884
884
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -898,9 +898,9 @@ function Image({ style, props }) {
|
|
|
898
898
|
}
|
|
899
899
|
);
|
|
900
900
|
if (!linkHref) {
|
|
901
|
-
return /* @__PURE__ */
|
|
901
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: sectionStyle }, imageElement);
|
|
902
902
|
}
|
|
903
|
-
return /* @__PURE__ */
|
|
903
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React57__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
904
904
|
}
|
|
905
905
|
var image_default = Image;
|
|
906
906
|
var FONT_FAMILY_SCHEMA5 = zod.z.enum([
|
|
@@ -1046,7 +1046,7 @@ function Signature({ style, props }) {
|
|
|
1046
1046
|
color: linkColor,
|
|
1047
1047
|
textDecoration: "none"
|
|
1048
1048
|
};
|
|
1049
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
1049
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React57__default.default.createElement(
|
|
1050
1050
|
"img",
|
|
1051
1051
|
{
|
|
1052
1052
|
src: imageUrl,
|
|
@@ -1065,18 +1065,18 @@ function Signature({ style, props }) {
|
|
|
1065
1065
|
}
|
|
1066
1066
|
) : null;
|
|
1067
1067
|
const contactParts = [];
|
|
1068
|
-
if (email) contactParts.push(/* @__PURE__ */
|
|
1069
|
-
if (phone) contactParts.push(/* @__PURE__ */
|
|
1068
|
+
if (email) contactParts.push(/* @__PURE__ */ React57__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1069
|
+
if (phone) contactParts.push(/* @__PURE__ */ React57__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1070
1070
|
if (website) {
|
|
1071
1071
|
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1072
|
-
contactParts.push(/* @__PURE__ */
|
|
1072
|
+
contactParts.push(/* @__PURE__ */ React57__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1073
1073
|
}
|
|
1074
|
-
const textContent = /* @__PURE__ */
|
|
1075
|
-
const greetingElement = greeting ? /* @__PURE__ */
|
|
1074
|
+
const textContent = /* @__PURE__ */ React57__default.default.createElement("div", null, name && /* @__PURE__ */ React57__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React57__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React57__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React57__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React57__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React57__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
|
|
1075
|
+
const greetingElement = greeting ? /* @__PURE__ */ React57__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1076
1076
|
if (layout === "vertical") {
|
|
1077
|
-
return /* @__PURE__ */
|
|
1077
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React57__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1078
1078
|
}
|
|
1079
|
-
return /* @__PURE__ */
|
|
1079
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React57__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React57__default.default.createElement("tbody", null, /* @__PURE__ */ React57__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React57__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React57__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
1080
1080
|
}
|
|
1081
1081
|
var signature_default = Signature;
|
|
1082
1082
|
var SpacerPropsSchema = zod.z.object({
|
|
@@ -1093,13 +1093,13 @@ function Spacer({ props }) {
|
|
|
1093
1093
|
const style = {
|
|
1094
1094
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
1095
1095
|
};
|
|
1096
|
-
return /* @__PURE__ */
|
|
1096
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style });
|
|
1097
1097
|
}
|
|
1098
1098
|
var spacer_default = Spacer;
|
|
1099
1099
|
function buildBlockComponent(blocks) {
|
|
1100
1100
|
return function BlockComponent({ type, data }) {
|
|
1101
1101
|
const Component = blocks[type].Component;
|
|
1102
|
-
return /* @__PURE__ */
|
|
1102
|
+
return /* @__PURE__ */ React57__default.default.createElement(Component, __spreadValues({}, data));
|
|
1103
1103
|
};
|
|
1104
1104
|
}
|
|
1105
1105
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -1168,9 +1168,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
1168
1168
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
1169
1169
|
let cols = void 0;
|
|
1170
1170
|
if (columns) {
|
|
1171
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1171
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React57__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1172
1172
|
}
|
|
1173
|
-
return /* @__PURE__ */
|
|
1173
|
+
return /* @__PURE__ */ React57__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
1174
1174
|
}
|
|
1175
1175
|
var ContainerPropsSchema2 = zod.z.object({
|
|
1176
1176
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -1181,7 +1181,7 @@ var ContainerPropsSchema2 = zod.z.object({
|
|
|
1181
1181
|
function ContainerReader({ style, props }) {
|
|
1182
1182
|
var _a;
|
|
1183
1183
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
1184
|
-
return /* @__PURE__ */
|
|
1184
|
+
return /* @__PURE__ */ React57__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React57__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1185
1185
|
}
|
|
1186
1186
|
var COLOR_SCHEMA9 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1187
1187
|
var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
@@ -1254,9 +1254,9 @@ function EmailLayoutReader(props) {
|
|
|
1254
1254
|
margin: "0"
|
|
1255
1255
|
};
|
|
1256
1256
|
if (props.backdropDisabled) {
|
|
1257
|
-
return /* @__PURE__ */
|
|
1257
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React57__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1258
1258
|
}
|
|
1259
|
-
return /* @__PURE__ */
|
|
1259
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
1260
1260
|
"div",
|
|
1261
1261
|
{
|
|
1262
1262
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
@@ -1266,7 +1266,7 @@ function EmailLayoutReader(props) {
|
|
|
1266
1266
|
width: "100%"
|
|
1267
1267
|
})
|
|
1268
1268
|
},
|
|
1269
|
-
/* @__PURE__ */
|
|
1269
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
1270
1270
|
"table",
|
|
1271
1271
|
{
|
|
1272
1272
|
align: "center",
|
|
@@ -1284,19 +1284,19 @@ function EmailLayoutReader(props) {
|
|
|
1284
1284
|
cellPadding: "0",
|
|
1285
1285
|
border: 0
|
|
1286
1286
|
},
|
|
1287
|
-
/* @__PURE__ */
|
|
1287
|
+
/* @__PURE__ */ React57__default.default.createElement("tbody", null, /* @__PURE__ */ React57__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React57__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React57__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1288
1288
|
)
|
|
1289
1289
|
);
|
|
1290
1290
|
}
|
|
1291
1291
|
|
|
1292
1292
|
// src/email-builder/reader/core.tsx
|
|
1293
|
-
var ReaderContext =
|
|
1293
|
+
var ReaderContext = React57.createContext({});
|
|
1294
1294
|
function useReaderDocument() {
|
|
1295
|
-
return
|
|
1295
|
+
return React57.useContext(ReaderContext);
|
|
1296
1296
|
}
|
|
1297
1297
|
function ReaderBlock({ id }) {
|
|
1298
1298
|
const document2 = useReaderDocument();
|
|
1299
|
-
return document2[id] ? /* @__PURE__ */
|
|
1299
|
+
return document2[id] ? /* @__PURE__ */ React57__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1300
1300
|
}
|
|
1301
1301
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1302
1302
|
ColumnsContainer: {
|
|
@@ -1353,13 +1353,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1353
1353
|
var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
|
|
1354
1354
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1355
1355
|
function Reader({ document: document2, rootBlockId }) {
|
|
1356
|
-
return /* @__PURE__ */
|
|
1356
|
+
return /* @__PURE__ */ React57__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React57__default.default.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1357
1357
|
}
|
|
1358
1358
|
|
|
1359
1359
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1360
1360
|
function renderToStaticMarkup(document2, { rootBlockId, variables }) {
|
|
1361
1361
|
const html2 = "<!DOCTYPE html>" + server.renderToStaticMarkup(
|
|
1362
|
-
/* @__PURE__ */
|
|
1362
|
+
/* @__PURE__ */ React57__default.default.createElement("html", null, /* @__PURE__ */ React57__default.default.createElement("body", null, /* @__PURE__ */ React57__default.default.createElement(Reader, { document: document2, rootBlockId })))
|
|
1363
1363
|
);
|
|
1364
1364
|
if (!variables) return html2;
|
|
1365
1365
|
return evaluateHandlebars(html2, variables);
|
|
@@ -2155,20 +2155,21 @@ function buildSavePayload(doc) {
|
|
|
2155
2155
|
}
|
|
2156
2156
|
|
|
2157
2157
|
// src/app/context.tsx
|
|
2158
|
-
var EmailEditorContext =
|
|
2158
|
+
var EmailEditorContext = React57.createContext(null);
|
|
2159
2159
|
var EmailEditorProvider = ({
|
|
2160
2160
|
children,
|
|
2161
2161
|
initialTemplateId = null,
|
|
2162
2162
|
initialTemplateName = null,
|
|
2163
2163
|
onSave
|
|
2164
2164
|
}) => {
|
|
2165
|
-
const [currentTemplateId, setCurrentTemplateId] =
|
|
2166
|
-
const [currentTemplateName, setCurrentTemplateName] =
|
|
2167
|
-
const [currentTemplateKind, setCurrentTemplateKind] =
|
|
2168
|
-
const
|
|
2169
|
-
const
|
|
2165
|
+
const [currentTemplateId, setCurrentTemplateId] = React57.useState(initialTemplateId);
|
|
2166
|
+
const [currentTemplateName, setCurrentTemplateName] = React57.useState(initialTemplateName);
|
|
2167
|
+
const [currentTemplateKind, setCurrentTemplateKind] = React57.useState(null);
|
|
2168
|
+
const [currentTemplateTags, setCurrentTemplateTagsState] = React57.useState([]);
|
|
2169
|
+
const saveListenersRef = React57.useRef([]);
|
|
2170
|
+
const onSaveRef = React57.useRef(onSave);
|
|
2170
2171
|
onSaveRef.current = onSave;
|
|
2171
|
-
const saveTemplate =
|
|
2172
|
+
const saveTemplate = React57.useCallback(() => {
|
|
2172
2173
|
const currentDoc = getDocument();
|
|
2173
2174
|
saveListenersRef.current.forEach((listener) => listener(currentDoc));
|
|
2174
2175
|
if (onSaveRef.current) {
|
|
@@ -2176,67 +2177,85 @@ var EmailEditorProvider = ({
|
|
|
2176
2177
|
}
|
|
2177
2178
|
return currentDoc;
|
|
2178
2179
|
}, []);
|
|
2179
|
-
const loadTemplate =
|
|
2180
|
-
|
|
2180
|
+
const loadTemplate = React57.useCallback(
|
|
2181
|
+
(_newTemplate, templateId, templateName, kind, tags) => {
|
|
2182
|
+
if (templateId !== void 0) setCurrentTemplateId(templateId);
|
|
2183
|
+
if (templateName !== void 0) setCurrentTemplateName(templateName);
|
|
2184
|
+
if (kind !== void 0) setCurrentTemplateKind(kind);
|
|
2185
|
+
if (tags !== void 0) setCurrentTemplateTagsState(tags != null ? tags : []);
|
|
2186
|
+
},
|
|
2187
|
+
[]
|
|
2188
|
+
);
|
|
2189
|
+
const setCurrentTemplate = React57.useCallback(
|
|
2190
|
+
(templateId, templateName, kind, tags) => {
|
|
2181
2191
|
setCurrentTemplateId(templateId);
|
|
2182
|
-
}
|
|
2183
|
-
if (templateName !== void 0) {
|
|
2184
2192
|
setCurrentTemplateName(templateName);
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
const
|
|
2191
|
-
|
|
2192
|
-
setCurrentTemplateName(templateName);
|
|
2193
|
-
if (kind !== void 0) {
|
|
2194
|
-
setCurrentTemplateKind(kind);
|
|
2195
|
-
}
|
|
2193
|
+
if (kind !== void 0) setCurrentTemplateKind(kind);
|
|
2194
|
+
if (tags !== void 0) setCurrentTemplateTagsState(tags != null ? tags : []);
|
|
2195
|
+
},
|
|
2196
|
+
[]
|
|
2197
|
+
);
|
|
2198
|
+
const setCurrentTemplateTags = React57.useCallback((tags) => {
|
|
2199
|
+
setCurrentTemplateTagsState(tags);
|
|
2196
2200
|
}, []);
|
|
2197
|
-
const registerSaveListener =
|
|
2201
|
+
const registerSaveListener = React57.useCallback((callback) => {
|
|
2198
2202
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
2199
2203
|
return () => {
|
|
2200
2204
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
2201
2205
|
};
|
|
2202
2206
|
}, []);
|
|
2203
|
-
const value =
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2207
|
+
const value = React57.useMemo(
|
|
2208
|
+
() => ({
|
|
2209
|
+
currentTemplateId,
|
|
2210
|
+
currentTemplateName,
|
|
2211
|
+
currentTemplateKind,
|
|
2212
|
+
currentTemplateTags,
|
|
2213
|
+
saveTemplate,
|
|
2214
|
+
loadTemplate,
|
|
2215
|
+
registerSaveListener,
|
|
2216
|
+
setCurrentTemplate,
|
|
2217
|
+
setCurrentTemplateTags
|
|
2218
|
+
}),
|
|
2219
|
+
[
|
|
2220
|
+
currentTemplateId,
|
|
2221
|
+
currentTemplateName,
|
|
2222
|
+
currentTemplateKind,
|
|
2223
|
+
currentTemplateTags,
|
|
2224
|
+
saveTemplate,
|
|
2225
|
+
loadTemplate,
|
|
2226
|
+
registerSaveListener,
|
|
2227
|
+
setCurrentTemplate,
|
|
2228
|
+
setCurrentTemplateTags
|
|
2229
|
+
]
|
|
2230
|
+
);
|
|
2231
|
+
return /* @__PURE__ */ React57__default.default.createElement(EmailEditorContext.Provider, { value }, children);
|
|
2213
2232
|
};
|
|
2214
2233
|
var useEmailEditor = () => {
|
|
2215
|
-
const context =
|
|
2234
|
+
const context = React57.useContext(EmailEditorContext);
|
|
2216
2235
|
if (!context) {
|
|
2217
2236
|
throw new Error("useEmailEditor must be used within an EmailEditorProvider");
|
|
2218
2237
|
}
|
|
2219
2238
|
return context;
|
|
2220
2239
|
};
|
|
2221
|
-
var ImageCallbacksContext =
|
|
2240
|
+
var ImageCallbacksContext = React57.createContext({});
|
|
2222
2241
|
function ImageCallbacksProvider({
|
|
2223
2242
|
callbacks,
|
|
2224
2243
|
children
|
|
2225
2244
|
}) {
|
|
2226
|
-
return /* @__PURE__ */
|
|
2245
|
+
return /* @__PURE__ */ React57__default.default.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
|
|
2227
2246
|
}
|
|
2228
2247
|
function useImageCallbacks() {
|
|
2229
|
-
return
|
|
2248
|
+
return React57.useContext(ImageCallbacksContext);
|
|
2230
2249
|
}
|
|
2231
2250
|
function BaseSidebarPanel({ title, children }) {
|
|
2232
|
-
return /* @__PURE__ */
|
|
2251
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
|
|
2233
2252
|
}
|
|
2234
2253
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
2235
|
-
const [value, setValue] =
|
|
2236
|
-
|
|
2254
|
+
const [value, setValue] = React57.useState(defaultValue);
|
|
2255
|
+
React57.useEffect(() => {
|
|
2237
2256
|
setValue(defaultValue);
|
|
2238
2257
|
}, [defaultValue]);
|
|
2239
|
-
return /* @__PURE__ */
|
|
2258
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React57__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React57__default.default.createElement(
|
|
2240
2259
|
material.ToggleButtonGroup,
|
|
2241
2260
|
{
|
|
2242
2261
|
exclusive: true,
|
|
@@ -2256,7 +2275,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
2256
2275
|
}
|
|
2257
2276
|
function RawSliderInput(_a) {
|
|
2258
2277
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
2259
|
-
return /* @__PURE__ */
|
|
2278
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React57__default.default.createElement(
|
|
2260
2279
|
material.Slider,
|
|
2261
2280
|
__spreadProps(__spreadValues({}, props), {
|
|
2262
2281
|
value,
|
|
@@ -2267,14 +2286,14 @@ function RawSliderInput(_a) {
|
|
|
2267
2286
|
setValue(value2);
|
|
2268
2287
|
}
|
|
2269
2288
|
})
|
|
2270
|
-
), /* @__PURE__ */
|
|
2289
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
2271
2290
|
}
|
|
2272
2291
|
|
|
2273
2292
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
2274
2293
|
function SliderInput(_a) {
|
|
2275
2294
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
2276
|
-
const [value, setValue] =
|
|
2277
|
-
return /* @__PURE__ */
|
|
2295
|
+
const [value, setValue] = React57.useState(defaultValue);
|
|
2296
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React57__default.default.createElement(
|
|
2278
2297
|
RawSliderInput,
|
|
2279
2298
|
__spreadValues({
|
|
2280
2299
|
value,
|
|
@@ -2286,12 +2305,12 @@ function SliderInput(_a) {
|
|
|
2286
2305
|
));
|
|
2287
2306
|
}
|
|
2288
2307
|
function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
|
|
2289
|
-
const [value, setValue] =
|
|
2308
|
+
const [value, setValue] = React57.useState(defaultValue);
|
|
2290
2309
|
const isMultiline = typeof rows === "number" && rows > 1;
|
|
2291
|
-
|
|
2310
|
+
React57.useEffect(() => {
|
|
2292
2311
|
setValue(defaultValue);
|
|
2293
2312
|
}, [defaultValue]);
|
|
2294
|
-
return /* @__PURE__ */
|
|
2313
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2295
2314
|
material.TextField,
|
|
2296
2315
|
{
|
|
2297
2316
|
fullWidth: true,
|
|
@@ -2317,7 +2336,7 @@ var TILE_BUTTON = {
|
|
|
2317
2336
|
};
|
|
2318
2337
|
function Swatch({ paletteColors, value, onChange }) {
|
|
2319
2338
|
const renderButton2 = (colorValue) => {
|
|
2320
|
-
return /* @__PURE__ */
|
|
2339
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2321
2340
|
material.Button,
|
|
2322
2341
|
{
|
|
2323
2342
|
key: colorValue,
|
|
@@ -2336,7 +2355,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
2336
2355
|
}
|
|
2337
2356
|
);
|
|
2338
2357
|
};
|
|
2339
|
-
return /* @__PURE__ */
|
|
2358
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
|
|
2340
2359
|
}
|
|
2341
2360
|
|
|
2342
2361
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2403,7 +2422,7 @@ var SX = {
|
|
|
2403
2422
|
}
|
|
2404
2423
|
};
|
|
2405
2424
|
function Picker({ value, onChange }) {
|
|
2406
|
-
return /* @__PURE__ */
|
|
2425
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React57__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React57__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React57__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React57__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
|
|
2407
2426
|
}
|
|
2408
2427
|
|
|
2409
2428
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2416,8 +2435,8 @@ var BUTTON_SX = {
|
|
|
2416
2435
|
bgcolor: "#FFFFFF"
|
|
2417
2436
|
};
|
|
2418
2437
|
function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
2419
|
-
const [anchorEl, setAnchorEl] =
|
|
2420
|
-
const [value, setValue] =
|
|
2438
|
+
const [anchorEl, setAnchorEl] = React57.useState(null);
|
|
2439
|
+
const [value, setValue] = React57.useState(defaultValue);
|
|
2421
2440
|
const handleClickOpen = (event) => {
|
|
2422
2441
|
setAnchorEl(event.currentTarget);
|
|
2423
2442
|
};
|
|
@@ -2428,7 +2447,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2428
2447
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2429
2448
|
return null;
|
|
2430
2449
|
}
|
|
2431
|
-
return /* @__PURE__ */
|
|
2450
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2432
2451
|
material.ButtonBase,
|
|
2433
2452
|
{
|
|
2434
2453
|
onClick: () => {
|
|
@@ -2436,16 +2455,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2436
2455
|
onChange(null);
|
|
2437
2456
|
}
|
|
2438
2457
|
},
|
|
2439
|
-
/* @__PURE__ */
|
|
2458
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2440
2459
|
);
|
|
2441
2460
|
};
|
|
2442
2461
|
const renderOpenButton = () => {
|
|
2443
2462
|
if (value) {
|
|
2444
|
-
return /* @__PURE__ */
|
|
2463
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2445
2464
|
}
|
|
2446
|
-
return /* @__PURE__ */
|
|
2465
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
|
|
2447
2466
|
};
|
|
2448
|
-
return /* @__PURE__ */
|
|
2467
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React57__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React57__default.default.createElement(
|
|
2449
2468
|
material.Menu,
|
|
2450
2469
|
{
|
|
2451
2470
|
anchorEl,
|
|
@@ -2455,7 +2474,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2455
2474
|
sx: { height: "auto", padding: 0 }
|
|
2456
2475
|
}
|
|
2457
2476
|
},
|
|
2458
|
-
/* @__PURE__ */
|
|
2477
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
2459
2478
|
Picker,
|
|
2460
2479
|
{
|
|
2461
2480
|
value: value || "",
|
|
@@ -2470,10 +2489,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2470
2489
|
|
|
2471
2490
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2472
2491
|
function ColorInput2(props) {
|
|
2473
|
-
return /* @__PURE__ */
|
|
2492
|
+
return /* @__PURE__ */ React57__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2474
2493
|
}
|
|
2475
2494
|
function NullableColorInput(props) {
|
|
2476
|
-
return /* @__PURE__ */
|
|
2495
|
+
return /* @__PURE__ */ React57__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2477
2496
|
}
|
|
2478
2497
|
|
|
2479
2498
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2526,13 +2545,13 @@ var FONT_FAMILIES = [
|
|
|
2526
2545
|
];
|
|
2527
2546
|
|
|
2528
2547
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2529
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2548
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2530
2549
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2531
|
-
const [value, setValue] =
|
|
2532
|
-
|
|
2550
|
+
const [value, setValue] = React57.useState(defaultValue != null ? defaultValue : "inherit");
|
|
2551
|
+
React57.useEffect(() => {
|
|
2533
2552
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2534
2553
|
}, [defaultValue]);
|
|
2535
|
-
return /* @__PURE__ */
|
|
2554
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2536
2555
|
material.TextField,
|
|
2537
2556
|
{
|
|
2538
2557
|
select: true,
|
|
@@ -2545,23 +2564,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2545
2564
|
onChange(v === null ? null : v);
|
|
2546
2565
|
}
|
|
2547
2566
|
},
|
|
2548
|
-
/* @__PURE__ */
|
|
2567
|
+
/* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2549
2568
|
OPTIONS
|
|
2550
2569
|
);
|
|
2551
2570
|
}
|
|
2552
2571
|
function FontSizeInput({ label, defaultValue, onChange }) {
|
|
2553
|
-
const [value, setValue] =
|
|
2554
|
-
|
|
2572
|
+
const [value, setValue] = React57.useState(defaultValue);
|
|
2573
|
+
React57.useEffect(() => {
|
|
2555
2574
|
setValue(defaultValue);
|
|
2556
2575
|
}, [defaultValue]);
|
|
2557
2576
|
const handleChange = (value2) => {
|
|
2558
2577
|
setValue(value2);
|
|
2559
2578
|
onChange(value2);
|
|
2560
2579
|
};
|
|
2561
|
-
return /* @__PURE__ */
|
|
2580
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React57__default.default.createElement(
|
|
2562
2581
|
RawSliderInput,
|
|
2563
2582
|
{
|
|
2564
|
-
iconLabel: /* @__PURE__ */
|
|
2583
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2565
2584
|
value,
|
|
2566
2585
|
setValue: handleChange,
|
|
2567
2586
|
units: "px",
|
|
@@ -2572,11 +2591,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2572
2591
|
));
|
|
2573
2592
|
}
|
|
2574
2593
|
function FontWeightInput({ label, defaultValue, onChange }) {
|
|
2575
|
-
const [value, setValue] =
|
|
2576
|
-
|
|
2594
|
+
const [value, setValue] = React57.useState(defaultValue);
|
|
2595
|
+
React57.useEffect(() => {
|
|
2577
2596
|
setValue(defaultValue);
|
|
2578
2597
|
}, [defaultValue]);
|
|
2579
|
-
return /* @__PURE__ */
|
|
2598
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2580
2599
|
RadioGroupInput,
|
|
2581
2600
|
{
|
|
2582
2601
|
label,
|
|
@@ -2586,23 +2605,23 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2586
2605
|
onChange(fontWeight);
|
|
2587
2606
|
}
|
|
2588
2607
|
},
|
|
2589
|
-
/* @__PURE__ */
|
|
2590
|
-
/* @__PURE__ */
|
|
2608
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
|
|
2609
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
|
|
2591
2610
|
);
|
|
2592
2611
|
}
|
|
2593
2612
|
function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
2594
|
-
const [value, setValue] =
|
|
2595
|
-
|
|
2613
|
+
const [value, setValue] = React57.useState(defaultValue != null ? defaultValue : 0);
|
|
2614
|
+
React57.useEffect(() => {
|
|
2596
2615
|
setValue(defaultValue != null ? defaultValue : 0);
|
|
2597
2616
|
}, [defaultValue]);
|
|
2598
2617
|
const handleChange = (v) => {
|
|
2599
2618
|
setValue(v);
|
|
2600
2619
|
onChange(v === 0 ? null : v);
|
|
2601
2620
|
};
|
|
2602
|
-
return /* @__PURE__ */
|
|
2621
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React57__default.default.createElement(
|
|
2603
2622
|
RawSliderInput,
|
|
2604
2623
|
{
|
|
2605
|
-
iconLabel: /* @__PURE__ */
|
|
2624
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { fontSize: 16 } }),
|
|
2606
2625
|
value,
|
|
2607
2626
|
setValue: handleChange,
|
|
2608
2627
|
units: "px",
|
|
@@ -2613,18 +2632,18 @@ function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
|
2613
2632
|
));
|
|
2614
2633
|
}
|
|
2615
2634
|
function LineHeightInput({ label, defaultValue, onChange }) {
|
|
2616
|
-
const [value, setValue] =
|
|
2617
|
-
|
|
2635
|
+
const [value, setValue] = React57.useState(defaultValue != null ? defaultValue : 0);
|
|
2636
|
+
React57.useEffect(() => {
|
|
2618
2637
|
setValue(defaultValue != null ? defaultValue : 0);
|
|
2619
2638
|
}, [defaultValue]);
|
|
2620
2639
|
const handleChange = (v) => {
|
|
2621
2640
|
setValue(v);
|
|
2622
2641
|
onChange(v === 0 ? null : v);
|
|
2623
2642
|
};
|
|
2624
|
-
return /* @__PURE__ */
|
|
2643
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React57__default.default.createElement(
|
|
2625
2644
|
RawSliderInput,
|
|
2626
2645
|
{
|
|
2627
|
-
iconLabel: /* @__PURE__ */
|
|
2646
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
|
|
2628
2647
|
value,
|
|
2629
2648
|
setValue: handleChange,
|
|
2630
2649
|
units: "",
|
|
@@ -2635,7 +2654,7 @@ function LineHeightInput({ label, defaultValue, onChange }) {
|
|
|
2635
2654
|
));
|
|
2636
2655
|
}
|
|
2637
2656
|
function PaddingInput({ label, defaultValue, onChange }) {
|
|
2638
|
-
const [value, setValue] =
|
|
2657
|
+
const [value, setValue] = React57.useState(() => {
|
|
2639
2658
|
if (defaultValue) {
|
|
2640
2659
|
return defaultValue;
|
|
2641
2660
|
}
|
|
@@ -2653,10 +2672,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2653
2672
|
setValue(v);
|
|
2654
2673
|
onChange(v);
|
|
2655
2674
|
}
|
|
2656
|
-
return /* @__PURE__ */
|
|
2675
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React57__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React57__default.default.createElement(
|
|
2657
2676
|
RawSliderInput,
|
|
2658
2677
|
{
|
|
2659
|
-
iconLabel: /* @__PURE__ */
|
|
2678
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2660
2679
|
value: value.top,
|
|
2661
2680
|
setValue: (num) => handleChange("top", num),
|
|
2662
2681
|
units: "px",
|
|
@@ -2665,10 +2684,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2665
2684
|
max: 80,
|
|
2666
2685
|
marks: true
|
|
2667
2686
|
}
|
|
2668
|
-
), /* @__PURE__ */
|
|
2687
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2669
2688
|
RawSliderInput,
|
|
2670
2689
|
{
|
|
2671
|
-
iconLabel: /* @__PURE__ */
|
|
2690
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2672
2691
|
value: value.bottom,
|
|
2673
2692
|
setValue: (num) => handleChange("bottom", num),
|
|
2674
2693
|
units: "px",
|
|
@@ -2677,10 +2696,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2677
2696
|
max: 80,
|
|
2678
2697
|
marks: true
|
|
2679
2698
|
}
|
|
2680
|
-
), /* @__PURE__ */
|
|
2699
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2681
2700
|
RawSliderInput,
|
|
2682
2701
|
{
|
|
2683
|
-
iconLabel: /* @__PURE__ */
|
|
2702
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2684
2703
|
value: value.left,
|
|
2685
2704
|
setValue: (num) => handleChange("left", num),
|
|
2686
2705
|
units: "px",
|
|
@@ -2689,10 +2708,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2689
2708
|
max: 80,
|
|
2690
2709
|
marks: true
|
|
2691
2710
|
}
|
|
2692
|
-
), /* @__PURE__ */
|
|
2711
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2693
2712
|
RawSliderInput,
|
|
2694
2713
|
{
|
|
2695
|
-
iconLabel: /* @__PURE__ */
|
|
2714
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2696
2715
|
value: value.right,
|
|
2697
2716
|
setValue: (num) => handleChange("right", num),
|
|
2698
2717
|
units: "px",
|
|
@@ -2704,11 +2723,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2704
2723
|
));
|
|
2705
2724
|
}
|
|
2706
2725
|
function TextAlignInput({ label, defaultValue, onChange }) {
|
|
2707
|
-
const [value, setValue] =
|
|
2708
|
-
|
|
2726
|
+
const [value, setValue] = React57.useState(defaultValue != null ? defaultValue : "left");
|
|
2727
|
+
React57.useEffect(() => {
|
|
2709
2728
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2710
2729
|
}, [defaultValue]);
|
|
2711
|
-
return /* @__PURE__ */
|
|
2730
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2712
2731
|
RadioGroupInput,
|
|
2713
2732
|
{
|
|
2714
2733
|
label,
|
|
@@ -2718,9 +2737,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2718
2737
|
onChange(value2);
|
|
2719
2738
|
}
|
|
2720
2739
|
},
|
|
2721
|
-
/* @__PURE__ */
|
|
2722
|
-
/* @__PURE__ */
|
|
2723
|
-
/* @__PURE__ */
|
|
2740
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2741
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2742
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2724
2743
|
);
|
|
2725
2744
|
}
|
|
2726
2745
|
|
|
@@ -2733,14 +2752,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2733
2752
|
};
|
|
2734
2753
|
switch (name) {
|
|
2735
2754
|
case "backgroundColor":
|
|
2736
|
-
return /* @__PURE__ */
|
|
2755
|
+
return /* @__PURE__ */ React57__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
|
|
2737
2756
|
case "borderColor":
|
|
2738
|
-
return /* @__PURE__ */
|
|
2757
|
+
return /* @__PURE__ */ React57__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
|
|
2739
2758
|
case "borderRadius":
|
|
2740
|
-
return /* @__PURE__ */
|
|
2759
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2741
2760
|
SliderInput,
|
|
2742
2761
|
{
|
|
2743
|
-
iconLabel: /* @__PURE__ */
|
|
2762
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2744
2763
|
units: "px",
|
|
2745
2764
|
step: 4,
|
|
2746
2765
|
marks: true,
|
|
@@ -2752,33 +2771,33 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2752
2771
|
}
|
|
2753
2772
|
);
|
|
2754
2773
|
case "color":
|
|
2755
|
-
return /* @__PURE__ */
|
|
2774
|
+
return /* @__PURE__ */ React57__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
|
|
2756
2775
|
case "fontFamily":
|
|
2757
|
-
return /* @__PURE__ */
|
|
2776
|
+
return /* @__PURE__ */ React57__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
|
|
2758
2777
|
case "fontSize":
|
|
2759
|
-
return /* @__PURE__ */
|
|
2778
|
+
return /* @__PURE__ */ React57__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
|
|
2760
2779
|
case "fontWeight":
|
|
2761
|
-
return /* @__PURE__ */
|
|
2780
|
+
return /* @__PURE__ */ React57__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
|
|
2762
2781
|
case "lineHeight":
|
|
2763
|
-
return /* @__PURE__ */
|
|
2782
|
+
return /* @__PURE__ */ React57__default.default.createElement(LineHeightInput, { label: "Line height", defaultValue, onChange: handleChange });
|
|
2764
2783
|
case "letterSpacing":
|
|
2765
|
-
return /* @__PURE__ */
|
|
2784
|
+
return /* @__PURE__ */ React57__default.default.createElement(LetterSpacingInput, { label: "Letter spacing", defaultValue, onChange: handleChange });
|
|
2766
2785
|
case "textAlign":
|
|
2767
|
-
return /* @__PURE__ */
|
|
2786
|
+
return /* @__PURE__ */ React57__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
|
|
2768
2787
|
case "padding":
|
|
2769
|
-
return /* @__PURE__ */
|
|
2788
|
+
return /* @__PURE__ */ React57__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
|
|
2770
2789
|
}
|
|
2771
2790
|
}
|
|
2772
2791
|
|
|
2773
2792
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2774
2793
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2775
|
-
return /* @__PURE__ */
|
|
2794
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React57__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2776
2795
|
}
|
|
2777
2796
|
|
|
2778
2797
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
2779
2798
|
function AvatarSidebarPanel({ data, setData }) {
|
|
2780
2799
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2781
|
-
const [, setErrors] =
|
|
2800
|
+
const [, setErrors] = React57.useState(null);
|
|
2782
2801
|
const updateData = (d) => {
|
|
2783
2802
|
const res = AvatarPropsSchema.safeParse(d);
|
|
2784
2803
|
if (res.success) {
|
|
@@ -2792,11 +2811,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2792
2811
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2793
2812
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2794
2813
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2795
|
-
return /* @__PURE__ */
|
|
2814
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
2796
2815
|
SliderInput,
|
|
2797
2816
|
{
|
|
2798
2817
|
label: "Size",
|
|
2799
|
-
iconLabel: /* @__PURE__ */
|
|
2818
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2800
2819
|
units: "px",
|
|
2801
2820
|
step: 3,
|
|
2802
2821
|
min: 32,
|
|
@@ -2806,7 +2825,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2806
2825
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2807
2826
|
}
|
|
2808
2827
|
}
|
|
2809
|
-
), /* @__PURE__ */
|
|
2828
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2810
2829
|
RadioGroupInput,
|
|
2811
2830
|
{
|
|
2812
2831
|
label: "Shape",
|
|
@@ -2815,10 +2834,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2815
2834
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2816
2835
|
}
|
|
2817
2836
|
},
|
|
2818
|
-
/* @__PURE__ */
|
|
2819
|
-
/* @__PURE__ */
|
|
2820
|
-
/* @__PURE__ */
|
|
2821
|
-
), /* @__PURE__ */
|
|
2837
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
|
|
2838
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
|
|
2839
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
|
|
2840
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2822
2841
|
TextInput,
|
|
2823
2842
|
{
|
|
2824
2843
|
label: "Image URL",
|
|
@@ -2827,7 +2846,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2827
2846
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2828
2847
|
}
|
|
2829
2848
|
}
|
|
2830
|
-
), /* @__PURE__ */
|
|
2849
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2831
2850
|
TextInput,
|
|
2832
2851
|
{
|
|
2833
2852
|
label: "Alt text",
|
|
@@ -2836,7 +2855,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2836
2855
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2837
2856
|
}
|
|
2838
2857
|
}
|
|
2839
|
-
), /* @__PURE__ */
|
|
2858
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2840
2859
|
MultiStylePropertyPanel,
|
|
2841
2860
|
{
|
|
2842
2861
|
names: ["textAlign", "padding"],
|
|
@@ -2847,7 +2866,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2847
2866
|
}
|
|
2848
2867
|
function ButtonSidebarPanel({ data, setData }) {
|
|
2849
2868
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2850
|
-
const [, setErrors] =
|
|
2869
|
+
const [, setErrors] = React57.useState(null);
|
|
2851
2870
|
const updateData = (d) => {
|
|
2852
2871
|
const res = ButtonPropsSchema.safeParse(d);
|
|
2853
2872
|
if (res.success) {
|
|
@@ -2864,65 +2883,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2864
2883
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2865
2884
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2866
2885
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2867
|
-
return /* @__PURE__ */
|
|
2886
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
2868
2887
|
TextInput,
|
|
2869
2888
|
{
|
|
2870
2889
|
label: "Text",
|
|
2871
2890
|
defaultValue: text,
|
|
2872
2891
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2873
2892
|
}
|
|
2874
|
-
), /* @__PURE__ */
|
|
2893
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2875
2894
|
TextInput,
|
|
2876
2895
|
{
|
|
2877
2896
|
label: "Url",
|
|
2878
2897
|
defaultValue: url,
|
|
2879
2898
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2880
2899
|
}
|
|
2881
|
-
), /* @__PURE__ */
|
|
2900
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2882
2901
|
RadioGroupInput,
|
|
2883
2902
|
{
|
|
2884
2903
|
label: "Width",
|
|
2885
2904
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2886
2905
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2887
2906
|
},
|
|
2888
|
-
/* @__PURE__ */
|
|
2889
|
-
/* @__PURE__ */
|
|
2890
|
-
), /* @__PURE__ */
|
|
2907
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
|
|
2908
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
|
|
2909
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2891
2910
|
RadioGroupInput,
|
|
2892
2911
|
{
|
|
2893
2912
|
label: "Size",
|
|
2894
2913
|
defaultValue: size,
|
|
2895
2914
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2896
2915
|
},
|
|
2897
|
-
/* @__PURE__ */
|
|
2898
|
-
/* @__PURE__ */
|
|
2899
|
-
/* @__PURE__ */
|
|
2900
|
-
/* @__PURE__ */
|
|
2901
|
-
), /* @__PURE__ */
|
|
2916
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
|
|
2917
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
|
|
2918
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
|
|
2919
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
|
|
2920
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2902
2921
|
RadioGroupInput,
|
|
2903
2922
|
{
|
|
2904
2923
|
label: "Style",
|
|
2905
2924
|
defaultValue: buttonStyle,
|
|
2906
2925
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2907
2926
|
},
|
|
2908
|
-
/* @__PURE__ */
|
|
2909
|
-
/* @__PURE__ */
|
|
2910
|
-
/* @__PURE__ */
|
|
2911
|
-
), /* @__PURE__ */
|
|
2927
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
|
|
2928
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
|
|
2929
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
|
|
2930
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2912
2931
|
ColorInput2,
|
|
2913
2932
|
{
|
|
2914
2933
|
label: "Text color",
|
|
2915
2934
|
defaultValue: buttonTextColor,
|
|
2916
2935
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2917
2936
|
}
|
|
2918
|
-
), /* @__PURE__ */
|
|
2937
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2919
2938
|
ColorInput2,
|
|
2920
2939
|
{
|
|
2921
2940
|
label: "Button color",
|
|
2922
2941
|
defaultValue: buttonBackgroundColor,
|
|
2923
2942
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2924
2943
|
}
|
|
2925
|
-
), /* @__PURE__ */
|
|
2944
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
2926
2945
|
MultiStylePropertyPanel,
|
|
2927
2946
|
{
|
|
2928
2947
|
names: [
|
|
@@ -2957,7 +2976,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2957
2976
|
const value = parseInt(ev.target.value);
|
|
2958
2977
|
onChange(isNaN(value) ? null : value);
|
|
2959
2978
|
};
|
|
2960
|
-
return /* @__PURE__ */
|
|
2979
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
2961
2980
|
material.TextField,
|
|
2962
2981
|
{
|
|
2963
2982
|
fullWidth: true,
|
|
@@ -2968,7 +2987,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2968
2987
|
placeholder: "auto",
|
|
2969
2988
|
size: "small",
|
|
2970
2989
|
InputProps: {
|
|
2971
|
-
endAdornment: /* @__PURE__ */
|
|
2990
|
+
endAdornment: /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2972
2991
|
}
|
|
2973
2992
|
}
|
|
2974
2993
|
);
|
|
@@ -2976,7 +2995,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2976
2995
|
|
|
2977
2996
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
|
|
2978
2997
|
function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
2979
|
-
const [currentValue, setCurrentValue] =
|
|
2998
|
+
const [currentValue, setCurrentValue] = React57.useState(() => {
|
|
2980
2999
|
if (defaultValue) {
|
|
2981
3000
|
return defaultValue;
|
|
2982
3001
|
}
|
|
@@ -2990,7 +3009,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2990
3009
|
};
|
|
2991
3010
|
let column3 = null;
|
|
2992
3011
|
{
|
|
2993
|
-
column3 = /* @__PURE__ */
|
|
3012
|
+
column3 = /* @__PURE__ */ React57__default.default.createElement(
|
|
2994
3013
|
TextDimensionInput,
|
|
2995
3014
|
{
|
|
2996
3015
|
label: "Column 3",
|
|
@@ -3001,7 +3020,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3001
3020
|
}
|
|
3002
3021
|
);
|
|
3003
3022
|
}
|
|
3004
|
-
return /* @__PURE__ */
|
|
3023
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3005
3024
|
TextDimensionInput,
|
|
3006
3025
|
{
|
|
3007
3026
|
label: "Column 1",
|
|
@@ -3010,7 +3029,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3010
3029
|
setIndexValue(0, v);
|
|
3011
3030
|
}
|
|
3012
3031
|
}
|
|
3013
|
-
), /* @__PURE__ */
|
|
3032
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3014
3033
|
TextDimensionInput,
|
|
3015
3034
|
{
|
|
3016
3035
|
label: "Column 2",
|
|
@@ -3025,7 +3044,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3025
3044
|
// src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
|
|
3026
3045
|
function ColumnsContainerPanel({ data, setData }) {
|
|
3027
3046
|
var _a, _b, _c, _d, _e, _f;
|
|
3028
|
-
const [, setErrors] =
|
|
3047
|
+
const [, setErrors] = React57.useState(null);
|
|
3029
3048
|
const updateData = (d) => {
|
|
3030
3049
|
const res = columns_container_props_schema_default2.safeParse(d);
|
|
3031
3050
|
if (res.success) {
|
|
@@ -3035,7 +3054,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3035
3054
|
setErrors(res.error);
|
|
3036
3055
|
}
|
|
3037
3056
|
};
|
|
3038
|
-
return /* @__PURE__ */
|
|
3057
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3039
3058
|
RadioGroupInput,
|
|
3040
3059
|
{
|
|
3041
3060
|
label: "Number of columns",
|
|
@@ -3044,9 +3063,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3044
3063
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
3045
3064
|
}
|
|
3046
3065
|
},
|
|
3047
|
-
/* @__PURE__ */
|
|
3048
|
-
/* @__PURE__ */
|
|
3049
|
-
), /* @__PURE__ */
|
|
3066
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
|
|
3067
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
|
|
3068
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3050
3069
|
ColumnWidthsInput,
|
|
3051
3070
|
{
|
|
3052
3071
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -3054,11 +3073,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3054
3073
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
3055
3074
|
}
|
|
3056
3075
|
}
|
|
3057
|
-
), /* @__PURE__ */
|
|
3076
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3058
3077
|
SliderInput,
|
|
3059
3078
|
{
|
|
3060
3079
|
label: "Columns gap",
|
|
3061
|
-
iconLabel: /* @__PURE__ */
|
|
3080
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
3062
3081
|
units: "px",
|
|
3063
3082
|
step: 4,
|
|
3064
3083
|
marks: true,
|
|
@@ -3067,7 +3086,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3067
3086
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
3068
3087
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
3069
3088
|
}
|
|
3070
|
-
), /* @__PURE__ */
|
|
3089
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3071
3090
|
RadioGroupInput,
|
|
3072
3091
|
{
|
|
3073
3092
|
label: "Alignment",
|
|
@@ -3076,10 +3095,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3076
3095
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
3077
3096
|
}
|
|
3078
3097
|
},
|
|
3079
|
-
/* @__PURE__ */
|
|
3080
|
-
/* @__PURE__ */
|
|
3081
|
-
/* @__PURE__ */
|
|
3082
|
-
), /* @__PURE__ */
|
|
3098
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3099
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3100
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3101
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3083
3102
|
MultiStylePropertyPanel,
|
|
3084
3103
|
{
|
|
3085
3104
|
names: ["backgroundColor", "padding"],
|
|
@@ -3098,7 +3117,7 @@ var container_props_schema_default = ContainerPropsSchema3;
|
|
|
3098
3117
|
|
|
3099
3118
|
// src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
|
|
3100
3119
|
function ContainerSidebarPanel({ data, setData }) {
|
|
3101
|
-
const [, setErrors] =
|
|
3120
|
+
const [, setErrors] = React57.useState(null);
|
|
3102
3121
|
const updateData = (d) => {
|
|
3103
3122
|
const res = container_props_schema_default.safeParse(d);
|
|
3104
3123
|
if (res.success) {
|
|
@@ -3108,7 +3127,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3108
3127
|
setErrors(res.error);
|
|
3109
3128
|
}
|
|
3110
3129
|
};
|
|
3111
|
-
return /* @__PURE__ */
|
|
3130
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3112
3131
|
MultiStylePropertyPanel,
|
|
3113
3132
|
{
|
|
3114
3133
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -3119,7 +3138,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3119
3138
|
}
|
|
3120
3139
|
function DividerSidebarPanel({ data, setData }) {
|
|
3121
3140
|
var _a, _b, _c, _d;
|
|
3122
|
-
const [, setErrors] =
|
|
3141
|
+
const [, setErrors] = React57.useState(null);
|
|
3123
3142
|
const updateData = (d) => {
|
|
3124
3143
|
const res = DividerPropsSchema.safeParse(d);
|
|
3125
3144
|
if (res.success) {
|
|
@@ -3131,18 +3150,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3131
3150
|
};
|
|
3132
3151
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
3133
3152
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
3134
|
-
return /* @__PURE__ */
|
|
3153
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3135
3154
|
ColorInput2,
|
|
3136
3155
|
{
|
|
3137
3156
|
label: "Color",
|
|
3138
3157
|
defaultValue: lineColor,
|
|
3139
3158
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
3140
3159
|
}
|
|
3141
|
-
), /* @__PURE__ */
|
|
3160
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3142
3161
|
SliderInput,
|
|
3143
3162
|
{
|
|
3144
3163
|
label: "Height",
|
|
3145
|
-
iconLabel: /* @__PURE__ */
|
|
3164
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3146
3165
|
units: "px",
|
|
3147
3166
|
step: 1,
|
|
3148
3167
|
min: 1,
|
|
@@ -3150,7 +3169,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3150
3169
|
defaultValue: lineHeight,
|
|
3151
3170
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
3152
3171
|
}
|
|
3153
|
-
), /* @__PURE__ */
|
|
3172
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3154
3173
|
MultiStylePropertyPanel,
|
|
3155
3174
|
{
|
|
3156
3175
|
names: ["backgroundColor", "padding"],
|
|
@@ -3190,15 +3209,15 @@ var EmailLayoutPropsSchema2 = zod.z.object({
|
|
|
3190
3209
|
});
|
|
3191
3210
|
var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
3192
3211
|
function BooleanInput({ label, defaultValue, onChange }) {
|
|
3193
|
-
const [value, setValue] =
|
|
3194
|
-
|
|
3212
|
+
const [value, setValue] = React57.useState(defaultValue);
|
|
3213
|
+
React57.useEffect(() => {
|
|
3195
3214
|
setValue(defaultValue);
|
|
3196
3215
|
}, [defaultValue]);
|
|
3197
|
-
return /* @__PURE__ */
|
|
3216
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
3198
3217
|
material.FormControlLabel,
|
|
3199
3218
|
{
|
|
3200
3219
|
label,
|
|
3201
|
-
control: /* @__PURE__ */
|
|
3220
|
+
control: /* @__PURE__ */ React57__default.default.createElement(
|
|
3202
3221
|
material.Switch,
|
|
3203
3222
|
{
|
|
3204
3223
|
checked: value,
|
|
@@ -3215,7 +3234,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3215
3234
|
// src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
|
|
3216
3235
|
function EmailLayoutSidebarFields({ data, setData }) {
|
|
3217
3236
|
var _a, _b, _c, _d, _e, _f;
|
|
3218
|
-
const [, setErrors] =
|
|
3237
|
+
const [, setErrors] = React57.useState(null);
|
|
3219
3238
|
const updateData = (d) => {
|
|
3220
3239
|
const res = email_layout_props_schema_default.safeParse(d);
|
|
3221
3240
|
if (res.success) {
|
|
@@ -3226,38 +3245,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3226
3245
|
}
|
|
3227
3246
|
};
|
|
3228
3247
|
const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
|
|
3229
|
-
return /* @__PURE__ */
|
|
3248
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3230
3249
|
BooleanInput,
|
|
3231
3250
|
{
|
|
3232
3251
|
label: "Disable backdrop",
|
|
3233
3252
|
defaultValue: backdropDisabled,
|
|
3234
3253
|
onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
|
|
3235
3254
|
}
|
|
3236
|
-
), !backdropDisabled && /* @__PURE__ */
|
|
3255
|
+
), !backdropDisabled && /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
3237
3256
|
ColorInput2,
|
|
3238
3257
|
{
|
|
3239
3258
|
label: "Backdrop color",
|
|
3240
3259
|
defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
|
|
3241
3260
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
3242
3261
|
}
|
|
3243
|
-
), /* @__PURE__ */
|
|
3262
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3244
3263
|
ColorInput2,
|
|
3245
3264
|
{
|
|
3246
3265
|
label: "Canvas color",
|
|
3247
3266
|
defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
|
|
3248
3267
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
3249
3268
|
}
|
|
3250
|
-
), /* @__PURE__ */
|
|
3269
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3251
3270
|
NullableColorInput,
|
|
3252
3271
|
{
|
|
3253
3272
|
label: "Canvas border color",
|
|
3254
3273
|
defaultValue: (_d = data.borderColor) != null ? _d : null,
|
|
3255
3274
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
3256
3275
|
}
|
|
3257
|
-
), /* @__PURE__ */
|
|
3276
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3258
3277
|
SliderInput,
|
|
3259
3278
|
{
|
|
3260
|
-
iconLabel: /* @__PURE__ */
|
|
3279
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
3261
3280
|
units: "px",
|
|
3262
3281
|
step: 4,
|
|
3263
3282
|
marks: true,
|
|
@@ -3267,14 +3286,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3267
3286
|
defaultValue: (_e = data.borderRadius) != null ? _e : 0,
|
|
3268
3287
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
3269
3288
|
}
|
|
3270
|
-
)), /* @__PURE__ */
|
|
3289
|
+
)), /* @__PURE__ */ React57__default.default.createElement(
|
|
3271
3290
|
NullableFontFamily,
|
|
3272
3291
|
{
|
|
3273
3292
|
label: "Font family",
|
|
3274
3293
|
defaultValue: "MODERN_SANS",
|
|
3275
3294
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
3276
3295
|
}
|
|
3277
|
-
), /* @__PURE__ */
|
|
3296
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3278
3297
|
ColorInput2,
|
|
3279
3298
|
{
|
|
3280
3299
|
label: "Text color",
|
|
@@ -3285,7 +3304,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3285
3304
|
}
|
|
3286
3305
|
function HeadingSidebarPanel({ data, setData }) {
|
|
3287
3306
|
var _a, _b, _c, _d;
|
|
3288
|
-
const [, setErrors] =
|
|
3307
|
+
const [, setErrors] = React57.useState(null);
|
|
3289
3308
|
const updateData = (d) => {
|
|
3290
3309
|
const res = HeadingPropsSchema.safeParse(d);
|
|
3291
3310
|
if (res.success) {
|
|
@@ -3295,7 +3314,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3295
3314
|
setErrors(res.error);
|
|
3296
3315
|
}
|
|
3297
3316
|
};
|
|
3298
|
-
return /* @__PURE__ */
|
|
3317
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3299
3318
|
TextInput,
|
|
3300
3319
|
{
|
|
3301
3320
|
label: "Content",
|
|
@@ -3305,7 +3324,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3305
3324
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
3306
3325
|
}
|
|
3307
3326
|
}
|
|
3308
|
-
), /* @__PURE__ */
|
|
3327
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3309
3328
|
RadioGroupInput,
|
|
3310
3329
|
{
|
|
3311
3330
|
label: "Level",
|
|
@@ -3314,10 +3333,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3314
3333
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
3315
3334
|
}
|
|
3316
3335
|
},
|
|
3317
|
-
/* @__PURE__ */
|
|
3318
|
-
/* @__PURE__ */
|
|
3319
|
-
/* @__PURE__ */
|
|
3320
|
-
), /* @__PURE__ */
|
|
3336
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
|
|
3337
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
|
|
3338
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
|
|
3339
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3321
3340
|
MultiStylePropertyPanel,
|
|
3322
3341
|
{
|
|
3323
3342
|
names: [
|
|
@@ -3337,7 +3356,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3337
3356
|
}
|
|
3338
3357
|
function HtmlSidebarPanel({ data, setData }) {
|
|
3339
3358
|
var _a, _b;
|
|
3340
|
-
const [, setErrors] =
|
|
3359
|
+
const [, setErrors] = React57.useState(null);
|
|
3341
3360
|
const updateData = (d) => {
|
|
3342
3361
|
const res = HtmlPropsSchema.safeParse(d);
|
|
3343
3362
|
if (res.success) {
|
|
@@ -3347,7 +3366,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3347
3366
|
setErrors(res.error);
|
|
3348
3367
|
}
|
|
3349
3368
|
};
|
|
3350
|
-
return /* @__PURE__ */
|
|
3369
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3351
3370
|
TextInput,
|
|
3352
3371
|
{
|
|
3353
3372
|
label: "Content",
|
|
@@ -3355,7 +3374,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3355
3374
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
3356
3375
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
3357
3376
|
}
|
|
3358
|
-
), /* @__PURE__ */
|
|
3377
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3359
3378
|
MultiStylePropertyPanel,
|
|
3360
3379
|
{
|
|
3361
3380
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -3366,10 +3385,10 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3366
3385
|
}
|
|
3367
3386
|
function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
3368
3387
|
const { loadImages, deleteImage } = useImageCallbacks();
|
|
3369
|
-
const [images, setImages] =
|
|
3370
|
-
const [error, setError] =
|
|
3371
|
-
const [query, setQuery] =
|
|
3372
|
-
const [busy, setBusy] =
|
|
3388
|
+
const [images, setImages] = React57.useState(null);
|
|
3389
|
+
const [error, setError] = React57.useState(null);
|
|
3390
|
+
const [query, setQuery] = React57.useState("");
|
|
3391
|
+
const [busy, setBusy] = React57.useState(false);
|
|
3373
3392
|
const refresh = () => __async(null, null, function* () {
|
|
3374
3393
|
if (!loadImages) return;
|
|
3375
3394
|
setBusy(true);
|
|
@@ -3383,13 +3402,13 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3383
3402
|
setBusy(false);
|
|
3384
3403
|
}
|
|
3385
3404
|
});
|
|
3386
|
-
|
|
3405
|
+
React57.useEffect(() => {
|
|
3387
3406
|
if (open) {
|
|
3388
3407
|
setQuery("");
|
|
3389
3408
|
void refresh();
|
|
3390
3409
|
}
|
|
3391
3410
|
}, [open]);
|
|
3392
|
-
const filtered =
|
|
3411
|
+
const filtered = React57.useMemo(() => {
|
|
3393
3412
|
if (!images) return null;
|
|
3394
3413
|
const q = query.trim().toLowerCase();
|
|
3395
3414
|
if (!q) return images;
|
|
@@ -3412,7 +3431,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3412
3431
|
setBusy(false);
|
|
3413
3432
|
}
|
|
3414
3433
|
});
|
|
3415
|
-
return /* @__PURE__ */
|
|
3434
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React57__default.default.createElement(material.DialogTitle, null, "Image library"), /* @__PURE__ */ React57__default.default.createElement(material.DialogContent, { dividers: true }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3416
3435
|
material.TextField,
|
|
3417
3436
|
{
|
|
3418
3437
|
fullWidth: true,
|
|
@@ -3422,11 +3441,11 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3422
3441
|
onChange: (e) => setQuery(e.target.value),
|
|
3423
3442
|
autoFocus: true,
|
|
3424
3443
|
InputProps: {
|
|
3425
|
-
startAdornment: /* @__PURE__ */
|
|
3444
|
+
startAdornment: /* @__PURE__ */ React57__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
3426
3445
|
},
|
|
3427
3446
|
sx: { mb: 2 }
|
|
3428
3447
|
}
|
|
3429
|
-
), error && /* @__PURE__ */
|
|
3448
|
+
), error && /* @__PURE__ */ React57__default.default.createElement(material.Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React57__default.default.createElement(material.Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React57__default.default.createElement(material.CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", textAlign: "center", py: 4 } }, query ? "No images match your search." : "No images in the library yet."), filtered && filtered.length > 0 && /* @__PURE__ */ React57__default.default.createElement(
|
|
3430
3449
|
material.Box,
|
|
3431
3450
|
{
|
|
3432
3451
|
sx: {
|
|
@@ -3435,7 +3454,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3435
3454
|
gap: 1.5
|
|
3436
3455
|
}
|
|
3437
3456
|
},
|
|
3438
|
-
filtered.map((img) => /* @__PURE__ */
|
|
3457
|
+
filtered.map((img) => /* @__PURE__ */ React57__default.default.createElement(
|
|
3439
3458
|
ImageTile,
|
|
3440
3459
|
{
|
|
3441
3460
|
key: img.url,
|
|
@@ -3444,7 +3463,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3444
3463
|
onDelete: deleteImage ? () => handleDelete(img.url) : void 0
|
|
3445
3464
|
}
|
|
3446
3465
|
))
|
|
3447
|
-
)), /* @__PURE__ */
|
|
3466
|
+
)), /* @__PURE__ */ React57__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React57__default.default.createElement(material.Button, { onClick: onClose }, "Close")));
|
|
3448
3467
|
}
|
|
3449
3468
|
function ImageTile({
|
|
3450
3469
|
image,
|
|
@@ -3454,7 +3473,7 @@ function ImageTile({
|
|
|
3454
3473
|
var _a, _b;
|
|
3455
3474
|
const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
|
|
3456
3475
|
const label = image.alt || image.url.split("/").pop() || "image";
|
|
3457
|
-
return /* @__PURE__ */
|
|
3476
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
3458
3477
|
material.Box,
|
|
3459
3478
|
{
|
|
3460
3479
|
sx: {
|
|
@@ -3470,7 +3489,7 @@ function ImageTile({
|
|
|
3470
3489
|
},
|
|
3471
3490
|
onClick: onPick
|
|
3472
3491
|
},
|
|
3473
|
-
/* @__PURE__ */
|
|
3492
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
3474
3493
|
material.Box,
|
|
3475
3494
|
{
|
|
3476
3495
|
component: "img",
|
|
@@ -3479,8 +3498,8 @@ function ImageTile({
|
|
|
3479
3498
|
sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
|
|
3480
3499
|
}
|
|
3481
3500
|
),
|
|
3482
|
-
/* @__PURE__ */
|
|
3483
|
-
onDelete && /* @__PURE__ */
|
|
3501
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
|
|
3502
|
+
onDelete && /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3484
3503
|
material.IconButton,
|
|
3485
3504
|
{
|
|
3486
3505
|
size: "small",
|
|
@@ -3500,7 +3519,7 @@ function ImageTile({
|
|
|
3500
3519
|
},
|
|
3501
3520
|
"aria-label": "Delete image"
|
|
3502
3521
|
},
|
|
3503
|
-
/* @__PURE__ */
|
|
3522
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
3504
3523
|
))
|
|
3505
3524
|
);
|
|
3506
3525
|
}
|
|
@@ -3512,12 +3531,12 @@ function isHttpUrl(value) {
|
|
|
3512
3531
|
}
|
|
3513
3532
|
function ImageSidebarPanel({ data, setData }) {
|
|
3514
3533
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
3515
|
-
const [, setErrors] =
|
|
3534
|
+
const [, setErrors] = React57.useState(null);
|
|
3516
3535
|
const { uploadImage, loadImages } = useImageCallbacks();
|
|
3517
|
-
const fileInputRef =
|
|
3518
|
-
const [uploading, setUploading] =
|
|
3519
|
-
const [uploadError, setUploadError] =
|
|
3520
|
-
const [libraryOpen, setLibraryOpen] =
|
|
3536
|
+
const fileInputRef = React57.useRef(null);
|
|
3537
|
+
const [uploading, setUploading] = React57.useState(false);
|
|
3538
|
+
const [uploadError, setUploadError] = React57.useState(null);
|
|
3539
|
+
const [libraryOpen, setLibraryOpen] = React57.useState(false);
|
|
3521
3540
|
const updateData = (d) => {
|
|
3522
3541
|
const res = ImagePropsSchema.safeParse(d);
|
|
3523
3542
|
if (res.success) {
|
|
@@ -3553,13 +3572,13 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3553
3572
|
});
|
|
3554
3573
|
const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
|
|
3555
3574
|
const showHttpWarning = isHttpUrl(url);
|
|
3556
|
-
return /* @__PURE__ */
|
|
3575
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
3557
3576
|
material.Button,
|
|
3558
3577
|
{
|
|
3559
3578
|
fullWidth: true,
|
|
3560
3579
|
variant: "outlined",
|
|
3561
3580
|
size: "small",
|
|
3562
|
-
startIcon: uploading ? /* @__PURE__ */
|
|
3581
|
+
startIcon: uploading ? /* @__PURE__ */ React57__default.default.createElement(material.CircularProgress, { size: 14 }) : /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.CloudUploadOutlined, { fontSize: "small" }),
|
|
3563
3582
|
disabled: uploading,
|
|
3564
3583
|
onClick: () => {
|
|
3565
3584
|
var _a2;
|
|
@@ -3567,7 +3586,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3567
3586
|
}
|
|
3568
3587
|
},
|
|
3569
3588
|
uploading ? "Uploading\u2026" : "Upload"
|
|
3570
|
-
), /* @__PURE__ */
|
|
3589
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3571
3590
|
"input",
|
|
3572
3591
|
{
|
|
3573
3592
|
ref: fileInputRef,
|
|
@@ -3581,17 +3600,17 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3581
3600
|
if (file) yield handleFile(file);
|
|
3582
3601
|
})
|
|
3583
3602
|
}
|
|
3584
|
-
)), loadImages && /* @__PURE__ */
|
|
3603
|
+
)), loadImages && /* @__PURE__ */ React57__default.default.createElement(
|
|
3585
3604
|
material.Button,
|
|
3586
3605
|
{
|
|
3587
3606
|
fullWidth: true,
|
|
3588
3607
|
variant: "outlined",
|
|
3589
3608
|
size: "small",
|
|
3590
|
-
startIcon: /* @__PURE__ */
|
|
3609
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.CollectionsOutlined, { fontSize: "small" }),
|
|
3591
3610
|
onClick: () => setLibraryOpen(true)
|
|
3592
3611
|
},
|
|
3593
3612
|
"Library"
|
|
3594
|
-
)), uploadError && /* @__PURE__ */
|
|
3613
|
+
)), uploadError && /* @__PURE__ */ React57__default.default.createElement(material.Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React57__default.default.createElement(
|
|
3595
3614
|
TextInput,
|
|
3596
3615
|
{
|
|
3597
3616
|
label: "Source URL",
|
|
@@ -3601,14 +3620,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3601
3620
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
|
|
3602
3621
|
}
|
|
3603
3622
|
}
|
|
3604
|
-
), showHttpWarning && /* @__PURE__ */
|
|
3623
|
+
), showHttpWarning && /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { fontSize: 12, color: "warning.dark" } }, "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery.")), /* @__PURE__ */ React57__default.default.createElement(
|
|
3605
3624
|
TextInput,
|
|
3606
3625
|
{
|
|
3607
3626
|
label: "Alt text",
|
|
3608
3627
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
3609
3628
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
3610
3629
|
}
|
|
3611
|
-
), /* @__PURE__ */
|
|
3630
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3612
3631
|
TextInput,
|
|
3613
3632
|
{
|
|
3614
3633
|
label: "Click through URL",
|
|
@@ -3618,38 +3637,38 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3618
3637
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
3619
3638
|
}
|
|
3620
3639
|
}
|
|
3621
|
-
), /* @__PURE__ */
|
|
3640
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3622
3641
|
TextDimensionInput,
|
|
3623
3642
|
{
|
|
3624
3643
|
label: "Width",
|
|
3625
3644
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
3626
3645
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
3627
3646
|
}
|
|
3628
|
-
), /* @__PURE__ */
|
|
3647
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3629
3648
|
TextDimensionInput,
|
|
3630
3649
|
{
|
|
3631
3650
|
label: "Height",
|
|
3632
3651
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
3633
3652
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
3634
3653
|
}
|
|
3635
|
-
)), /* @__PURE__ */
|
|
3654
|
+
)), /* @__PURE__ */ React57__default.default.createElement(
|
|
3636
3655
|
RadioGroupInput,
|
|
3637
3656
|
{
|
|
3638
3657
|
label: "Alignment",
|
|
3639
3658
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
3640
3659
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
3641
3660
|
},
|
|
3642
|
-
/* @__PURE__ */
|
|
3643
|
-
/* @__PURE__ */
|
|
3644
|
-
/* @__PURE__ */
|
|
3645
|
-
), /* @__PURE__ */
|
|
3661
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3662
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3663
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3664
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3646
3665
|
MultiStylePropertyPanel,
|
|
3647
3666
|
{
|
|
3648
3667
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
3649
3668
|
value: data.style,
|
|
3650
3669
|
onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
|
|
3651
3670
|
}
|
|
3652
|
-
), loadImages && /* @__PURE__ */
|
|
3671
|
+
), loadImages && /* @__PURE__ */ React57__default.default.createElement(
|
|
3653
3672
|
ImageLibraryDialog,
|
|
3654
3673
|
{
|
|
3655
3674
|
open: libraryOpen,
|
|
@@ -3663,7 +3682,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3663
3682
|
}
|
|
3664
3683
|
function SignatureSidebarPanel({ data, setData }) {
|
|
3665
3684
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
|
|
3666
|
-
const [, setErrors] =
|
|
3685
|
+
const [, setErrors] = React57.useState(null);
|
|
3667
3686
|
const updateData = (d) => {
|
|
3668
3687
|
const res = SignaturePropsSchema.safeParse(d);
|
|
3669
3688
|
if (res.success) {
|
|
@@ -3688,74 +3707,74 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3688
3707
|
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3689
3708
|
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3690
3709
|
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3691
|
-
return /* @__PURE__ */
|
|
3710
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3692
3711
|
TextInput,
|
|
3693
3712
|
{
|
|
3694
3713
|
label: "Greeting",
|
|
3695
3714
|
defaultValue: greeting,
|
|
3696
3715
|
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3697
3716
|
}
|
|
3698
|
-
), /* @__PURE__ */
|
|
3717
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3699
3718
|
TextInput,
|
|
3700
3719
|
{
|
|
3701
3720
|
label: "Name",
|
|
3702
3721
|
defaultValue: name,
|
|
3703
3722
|
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3704
3723
|
}
|
|
3705
|
-
), /* @__PURE__ */
|
|
3724
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3706
3725
|
TextInput,
|
|
3707
3726
|
{
|
|
3708
3727
|
label: "Title",
|
|
3709
3728
|
defaultValue: title,
|
|
3710
3729
|
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3711
3730
|
}
|
|
3712
|
-
), /* @__PURE__ */
|
|
3731
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3713
3732
|
TextInput,
|
|
3714
3733
|
{
|
|
3715
3734
|
label: "Company",
|
|
3716
3735
|
defaultValue: company,
|
|
3717
3736
|
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3718
3737
|
}
|
|
3719
|
-
), /* @__PURE__ */
|
|
3738
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3720
3739
|
TextInput,
|
|
3721
3740
|
{
|
|
3722
3741
|
label: "Address",
|
|
3723
3742
|
defaultValue: address,
|
|
3724
3743
|
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3725
3744
|
}
|
|
3726
|
-
), /* @__PURE__ */
|
|
3745
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3727
3746
|
TextInput,
|
|
3728
3747
|
{
|
|
3729
3748
|
label: "Email",
|
|
3730
3749
|
defaultValue: email,
|
|
3731
3750
|
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3732
3751
|
}
|
|
3733
|
-
), /* @__PURE__ */
|
|
3752
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3734
3753
|
TextInput,
|
|
3735
3754
|
{
|
|
3736
3755
|
label: "Phone",
|
|
3737
3756
|
defaultValue: phone,
|
|
3738
3757
|
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3739
3758
|
}
|
|
3740
|
-
), /* @__PURE__ */
|
|
3759
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3741
3760
|
TextInput,
|
|
3742
3761
|
{
|
|
3743
3762
|
label: "Website",
|
|
3744
3763
|
defaultValue: website,
|
|
3745
3764
|
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3746
3765
|
}
|
|
3747
|
-
), /* @__PURE__ */
|
|
3766
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3748
3767
|
TextInput,
|
|
3749
3768
|
{
|
|
3750
3769
|
label: "Image URL",
|
|
3751
3770
|
defaultValue: imageUrl,
|
|
3752
3771
|
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3753
3772
|
}
|
|
3754
|
-
), /* @__PURE__ */
|
|
3773
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3755
3774
|
SliderInput,
|
|
3756
3775
|
{
|
|
3757
3776
|
label: "Image size",
|
|
3758
|
-
iconLabel: /* @__PURE__ */
|
|
3777
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3759
3778
|
units: "px",
|
|
3760
3779
|
step: 4,
|
|
3761
3780
|
min: 32,
|
|
@@ -3763,47 +3782,47 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3763
3782
|
defaultValue: imageSize,
|
|
3764
3783
|
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3765
3784
|
}
|
|
3766
|
-
), /* @__PURE__ */
|
|
3785
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3767
3786
|
RadioGroupInput,
|
|
3768
3787
|
{
|
|
3769
3788
|
label: "Image shape",
|
|
3770
3789
|
defaultValue: imageShape,
|
|
3771
3790
|
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3772
3791
|
},
|
|
3773
|
-
/* @__PURE__ */
|
|
3774
|
-
/* @__PURE__ */
|
|
3775
|
-
/* @__PURE__ */
|
|
3776
|
-
), /* @__PURE__ */
|
|
3792
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
|
|
3793
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
|
|
3794
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
|
|
3795
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3777
3796
|
RadioGroupInput,
|
|
3778
3797
|
{
|
|
3779
3798
|
label: "Layout",
|
|
3780
3799
|
defaultValue: layout,
|
|
3781
3800
|
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3782
3801
|
},
|
|
3783
|
-
/* @__PURE__ */
|
|
3784
|
-
/* @__PURE__ */
|
|
3785
|
-
), /* @__PURE__ */
|
|
3802
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "horizontal" }, "Horizontal"),
|
|
3803
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "vertical" }, "Vertical")
|
|
3804
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3786
3805
|
ColorInput2,
|
|
3787
3806
|
{
|
|
3788
3807
|
label: "Name color",
|
|
3789
3808
|
defaultValue: nameColor,
|
|
3790
3809
|
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3791
3810
|
}
|
|
3792
|
-
), /* @__PURE__ */
|
|
3811
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3793
3812
|
ColorInput2,
|
|
3794
3813
|
{
|
|
3795
3814
|
label: "Text color",
|
|
3796
3815
|
defaultValue: textColor,
|
|
3797
3816
|
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3798
3817
|
}
|
|
3799
|
-
), /* @__PURE__ */
|
|
3818
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3800
3819
|
ColorInput2,
|
|
3801
3820
|
{
|
|
3802
3821
|
label: "Link color",
|
|
3803
3822
|
defaultValue: linkColor,
|
|
3804
3823
|
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3805
3824
|
}
|
|
3806
|
-
), /* @__PURE__ */
|
|
3825
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3807
3826
|
MultiStylePropertyPanel,
|
|
3808
3827
|
{
|
|
3809
3828
|
names: ["backgroundColor", "fontFamily", "padding"],
|
|
@@ -3814,7 +3833,7 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3814
3833
|
}
|
|
3815
3834
|
function SpacerSidebarPanel({ data, setData }) {
|
|
3816
3835
|
var _a, _b;
|
|
3817
|
-
const [, setErrors] =
|
|
3836
|
+
const [, setErrors] = React57.useState(null);
|
|
3818
3837
|
const updateData = (d) => {
|
|
3819
3838
|
const res = SpacerPropsSchema.safeParse(d);
|
|
3820
3839
|
if (res.success) {
|
|
@@ -3824,11 +3843,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3824
3843
|
setErrors(res.error);
|
|
3825
3844
|
}
|
|
3826
3845
|
};
|
|
3827
|
-
return /* @__PURE__ */
|
|
3846
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3828
3847
|
SliderInput,
|
|
3829
3848
|
{
|
|
3830
3849
|
label: "Height",
|
|
3831
|
-
iconLabel: /* @__PURE__ */
|
|
3850
|
+
iconLabel: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3832
3851
|
units: "px",
|
|
3833
3852
|
step: 4,
|
|
3834
3853
|
min: 4,
|
|
@@ -3840,7 +3859,7 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3840
3859
|
}
|
|
3841
3860
|
function TextSidebarPanel({ data, setData }) {
|
|
3842
3861
|
var _a, _b, _c, _d;
|
|
3843
|
-
const [, setErrors] =
|
|
3862
|
+
const [, setErrors] = React57.useState(null);
|
|
3844
3863
|
const updateData = (d) => {
|
|
3845
3864
|
const res = TextPropsSchema.safeParse(d);
|
|
3846
3865
|
if (res.success) {
|
|
@@ -3850,7 +3869,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3850
3869
|
setErrors(res.error);
|
|
3851
3870
|
}
|
|
3852
3871
|
};
|
|
3853
|
-
return /* @__PURE__ */
|
|
3872
|
+
return /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
3854
3873
|
TextInput,
|
|
3855
3874
|
{
|
|
3856
3875
|
label: "Content",
|
|
@@ -3858,14 +3877,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3858
3877
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3859
3878
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3860
3879
|
}
|
|
3861
|
-
), /* @__PURE__ */
|
|
3880
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3862
3881
|
BooleanInput,
|
|
3863
3882
|
{
|
|
3864
3883
|
label: "Markdown",
|
|
3865
3884
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3866
3885
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3867
3886
|
}
|
|
3868
|
-
), /* @__PURE__ */
|
|
3887
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
3869
3888
|
MultiStylePropertyPanel,
|
|
3870
3889
|
{
|
|
3871
3890
|
names: [
|
|
@@ -3887,7 +3906,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3887
3906
|
|
|
3888
3907
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
3889
3908
|
function renderMessage(val) {
|
|
3890
|
-
return /* @__PURE__ */
|
|
3909
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
|
|
3891
3910
|
}
|
|
3892
3911
|
function ConfigurationPanel() {
|
|
3893
3912
|
const document2 = useDocument();
|
|
@@ -3903,55 +3922,55 @@ function ConfigurationPanel() {
|
|
|
3903
3922
|
const { data, type } = block;
|
|
3904
3923
|
switch (type) {
|
|
3905
3924
|
case "Avatar":
|
|
3906
|
-
return /* @__PURE__ */
|
|
3925
|
+
return /* @__PURE__ */ React57__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3907
3926
|
case "Button":
|
|
3908
|
-
return /* @__PURE__ */
|
|
3927
|
+
return /* @__PURE__ */ React57__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3909
3928
|
case "ColumnsContainer":
|
|
3910
|
-
return /* @__PURE__ */
|
|
3929
|
+
return /* @__PURE__ */ React57__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3911
3930
|
case "Container":
|
|
3912
|
-
return /* @__PURE__ */
|
|
3931
|
+
return /* @__PURE__ */ React57__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3913
3932
|
case "Divider":
|
|
3914
|
-
return /* @__PURE__ */
|
|
3933
|
+
return /* @__PURE__ */ React57__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3915
3934
|
case "Heading":
|
|
3916
|
-
return /* @__PURE__ */
|
|
3935
|
+
return /* @__PURE__ */ React57__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3917
3936
|
case "Html":
|
|
3918
|
-
return /* @__PURE__ */
|
|
3937
|
+
return /* @__PURE__ */ React57__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3919
3938
|
case "Image":
|
|
3920
|
-
return /* @__PURE__ */
|
|
3939
|
+
return /* @__PURE__ */ React57__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3921
3940
|
case "EmailLayout":
|
|
3922
|
-
return /* @__PURE__ */
|
|
3941
|
+
return /* @__PURE__ */ React57__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3923
3942
|
case "Spacer":
|
|
3924
|
-
return /* @__PURE__ */
|
|
3943
|
+
return /* @__PURE__ */ React57__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3925
3944
|
case "Signature":
|
|
3926
|
-
return /* @__PURE__ */
|
|
3945
|
+
return /* @__PURE__ */ React57__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3927
3946
|
case "Text":
|
|
3928
|
-
return /* @__PURE__ */
|
|
3947
|
+
return /* @__PURE__ */ React57__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3929
3948
|
default:
|
|
3930
|
-
return /* @__PURE__ */
|
|
3949
|
+
return /* @__PURE__ */ React57__default.default.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
3931
3950
|
}
|
|
3932
3951
|
}
|
|
3933
3952
|
function StylesPanel() {
|
|
3934
3953
|
const block = useDocument().root;
|
|
3935
3954
|
if (!block) {
|
|
3936
|
-
return /* @__PURE__ */
|
|
3955
|
+
return /* @__PURE__ */ React57__default.default.createElement("p", null, "Block not found");
|
|
3937
3956
|
}
|
|
3938
3957
|
const { data, type } = block;
|
|
3939
3958
|
if (type !== "EmailLayout") {
|
|
3940
3959
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3941
3960
|
}
|
|
3942
|
-
return /* @__PURE__ */
|
|
3961
|
+
return /* @__PURE__ */ React57__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3943
3962
|
}
|
|
3944
3963
|
function TemplateDownloadButton() {
|
|
3945
3964
|
const doc = useDocument();
|
|
3946
|
-
const href =
|
|
3965
|
+
const href = React57.useMemo(() => {
|
|
3947
3966
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3948
3967
|
}, [doc]);
|
|
3949
|
-
return /* @__PURE__ */
|
|
3968
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
3950
3969
|
material.Button,
|
|
3951
3970
|
{
|
|
3952
3971
|
variant: "outlined",
|
|
3953
3972
|
color: "primary",
|
|
3954
|
-
startIcon: /* @__PURE__ */
|
|
3973
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
|
|
3955
3974
|
href,
|
|
3956
3975
|
download: "emailTemplate.json",
|
|
3957
3976
|
fullWidth: true
|
|
@@ -3961,8 +3980,18 @@ function TemplateDownloadButton() {
|
|
|
3961
3980
|
}
|
|
3962
3981
|
|
|
3963
3982
|
// src/app/inspector-drawer/template-panel.tsx
|
|
3964
|
-
function TemplatePanel({
|
|
3965
|
-
|
|
3983
|
+
function TemplatePanel({
|
|
3984
|
+
deleteTemplate,
|
|
3985
|
+
copyTemplate,
|
|
3986
|
+
renameTemplate
|
|
3987
|
+
}) {
|
|
3988
|
+
const {
|
|
3989
|
+
currentTemplateId,
|
|
3990
|
+
currentTemplateName,
|
|
3991
|
+
currentTemplateTags,
|
|
3992
|
+
setCurrentTemplate,
|
|
3993
|
+
setCurrentTemplateTags
|
|
3994
|
+
} = useEmailEditor();
|
|
3966
3995
|
const document2 = useDocument();
|
|
3967
3996
|
const persistenceEnabled = usePersistenceEnabled();
|
|
3968
3997
|
const workspaceBackground = useWorkspaceBackground();
|
|
@@ -3983,7 +4012,7 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3983
4012
|
window.alert("Template copied successfully!");
|
|
3984
4013
|
}
|
|
3985
4014
|
};
|
|
3986
|
-
const workspaceToggle = /* @__PURE__ */
|
|
4015
|
+
const workspaceToggle = /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Editor appearance" }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 1 }, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary" } }, "Workspace background"), /* @__PURE__ */ React57__default.default.createElement(
|
|
3987
4016
|
material.ToggleButtonGroup,
|
|
3988
4017
|
{
|
|
3989
4018
|
value: workspaceBackground,
|
|
@@ -3991,13 +4020,27 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3991
4020
|
size: "small",
|
|
3992
4021
|
onChange: (_, v) => v && setWorkspaceBackground(v)
|
|
3993
4022
|
},
|
|
3994
|
-
/* @__PURE__ */
|
|
3995
|
-
/* @__PURE__ */
|
|
3996
|
-
), /* @__PURE__ */
|
|
4023
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "checkerboard", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.GridOnOutlined, { fontSize: "small" }), "Checkerboard"),
|
|
4024
|
+
/* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "solid", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SquareOutlined, { fontSize: "small" }), "Solid")
|
|
4025
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled" } }, "Editor-only \u2014 never reaches the rendered email.")));
|
|
3997
4026
|
if (!currentTemplateId) {
|
|
3998
|
-
return /* @__PURE__ */
|
|
4027
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected"), workspaceToggle);
|
|
3999
4028
|
}
|
|
4000
|
-
return /* @__PURE__ */
|
|
4029
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Details" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4030
|
+
DetailsEditor,
|
|
4031
|
+
{
|
|
4032
|
+
templateId: currentTemplateId,
|
|
4033
|
+
currentName: currentTemplateName != null ? currentTemplateName : "",
|
|
4034
|
+
currentTags: currentTemplateTags,
|
|
4035
|
+
canEdit: Boolean(renameTemplate),
|
|
4036
|
+
onSave: (name, tags) => __async(null, null, function* () {
|
|
4037
|
+
if (!renameTemplate) return;
|
|
4038
|
+
yield renameTemplate(currentTemplateId, name, { tags });
|
|
4039
|
+
setCurrentTemplate(currentTemplateId, name);
|
|
4040
|
+
setCurrentTemplateTags(tags);
|
|
4041
|
+
})
|
|
4042
|
+
}
|
|
4043
|
+
)), /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React57__default.default.createElement(
|
|
4001
4044
|
material.Typography,
|
|
4002
4045
|
{
|
|
4003
4046
|
variant: "body2",
|
|
@@ -4010,29 +4053,127 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
4010
4053
|
}
|
|
4011
4054
|
},
|
|
4012
4055
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
4013
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
4056
|
+
), persistenceEnabled && /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
4014
4057
|
material.Button,
|
|
4015
4058
|
{
|
|
4016
4059
|
variant: "outlined",
|
|
4017
4060
|
color: "primary",
|
|
4018
|
-
startIcon: /* @__PURE__ */
|
|
4061
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
|
|
4019
4062
|
onClick: handleCopyToSamples,
|
|
4020
4063
|
fullWidth: true,
|
|
4021
4064
|
disabled: !copyTemplate
|
|
4022
4065
|
},
|
|
4023
4066
|
"Save as Sample Template"
|
|
4024
|
-
), /* @__PURE__ */
|
|
4067
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
4025
4068
|
material.Button,
|
|
4026
4069
|
{
|
|
4027
4070
|
variant: "outlined",
|
|
4028
4071
|
color: "error",
|
|
4029
|
-
startIcon: /* @__PURE__ */
|
|
4072
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DeleteOutlined, null),
|
|
4030
4073
|
onClick: handleDelete,
|
|
4031
4074
|
fullWidth: true,
|
|
4032
4075
|
disabled: !deleteTemplate
|
|
4033
4076
|
},
|
|
4034
4077
|
"Delete Template"
|
|
4035
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
4078
|
+
)))), persistenceEnabled && /* @__PURE__ */ React57__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React57__default.default.createElement(TemplateDownloadButton, null))), workspaceToggle);
|
|
4079
|
+
}
|
|
4080
|
+
function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }) {
|
|
4081
|
+
const [name, setName] = React57.useState(currentName);
|
|
4082
|
+
const [tags, setTags] = React57.useState(currentTags);
|
|
4083
|
+
const [tagInput, setTagInput] = React57.useState("");
|
|
4084
|
+
const [saving, setSaving] = React57.useState(false);
|
|
4085
|
+
const [justSaved, setJustSaved] = React57.useState(false);
|
|
4086
|
+
React57.useEffect(() => {
|
|
4087
|
+
setName(currentName);
|
|
4088
|
+
}, [templateId, currentName]);
|
|
4089
|
+
React57.useEffect(() => {
|
|
4090
|
+
setTags(currentTags);
|
|
4091
|
+
}, [templateId, currentTags.join("")]);
|
|
4092
|
+
const addTag = () => {
|
|
4093
|
+
const trimmed = tagInput.trim();
|
|
4094
|
+
if (!trimmed) return;
|
|
4095
|
+
if (tags.some((t) => t.toLowerCase() === trimmed.toLowerCase())) {
|
|
4096
|
+
setTagInput("");
|
|
4097
|
+
return;
|
|
4098
|
+
}
|
|
4099
|
+
setTags([...tags, trimmed]);
|
|
4100
|
+
setTagInput("");
|
|
4101
|
+
};
|
|
4102
|
+
const removeTag = (tag) => setTags(tags.filter((t) => t !== tag));
|
|
4103
|
+
const dirty = name !== currentName || tags.length !== currentTags.length || tags.some((t, i) => t !== currentTags[i]);
|
|
4104
|
+
const handleSave = () => __async(null, null, function* () {
|
|
4105
|
+
if (!canEdit || !dirty || !name.trim()) return;
|
|
4106
|
+
setSaving(true);
|
|
4107
|
+
try {
|
|
4108
|
+
yield onSave(name.trim(), tags);
|
|
4109
|
+
setJustSaved(true);
|
|
4110
|
+
window.setTimeout(() => setJustSaved(false), 1600);
|
|
4111
|
+
} finally {
|
|
4112
|
+
setSaving(false);
|
|
4113
|
+
}
|
|
4114
|
+
});
|
|
4115
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 1.5 }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4116
|
+
material.TextField,
|
|
4117
|
+
{
|
|
4118
|
+
size: "small",
|
|
4119
|
+
label: "Name",
|
|
4120
|
+
value: name,
|
|
4121
|
+
onChange: (e) => setName(e.target.value),
|
|
4122
|
+
disabled: !canEdit || saving,
|
|
4123
|
+
fullWidth: true
|
|
4124
|
+
}
|
|
4125
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Box, null, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 0.5 } }, "Tags"), tags.length > 0 ? /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React57__default.default.createElement(
|
|
4126
|
+
material.Chip,
|
|
4127
|
+
{
|
|
4128
|
+
key: tag,
|
|
4129
|
+
label: tag,
|
|
4130
|
+
size: "small",
|
|
4131
|
+
onDelete: canEdit && !saving ? () => removeTag(tag) : void 0
|
|
4132
|
+
}
|
|
4133
|
+
))) : /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, "No tags. Suggested: ", /* @__PURE__ */ React57__default.default.createElement("i", null, "transactional"), ", ", /* @__PURE__ */ React57__default.default.createElement("i", null, "marketing"), "."), /* @__PURE__ */ React57__default.default.createElement(
|
|
4134
|
+
material.TextField,
|
|
4135
|
+
{
|
|
4136
|
+
size: "small",
|
|
4137
|
+
fullWidth: true,
|
|
4138
|
+
placeholder: "Add a tag",
|
|
4139
|
+
value: tagInput,
|
|
4140
|
+
onChange: (e) => setTagInput(e.target.value),
|
|
4141
|
+
disabled: !canEdit || saving,
|
|
4142
|
+
onKeyDown: (e) => {
|
|
4143
|
+
if (e.key === "Enter" || e.key === ",") {
|
|
4144
|
+
e.preventDefault();
|
|
4145
|
+
addTag();
|
|
4146
|
+
} else if (e.key === "Backspace" && !tagInput && tags.length > 0) {
|
|
4147
|
+
e.preventDefault();
|
|
4148
|
+
removeTag(tags[tags.length - 1]);
|
|
4149
|
+
}
|
|
4150
|
+
},
|
|
4151
|
+
InputProps: {
|
|
4152
|
+
endAdornment: /* @__PURE__ */ React57__default.default.createElement(material.InputAdornment, { position: "end" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4153
|
+
material.Button,
|
|
4154
|
+
{
|
|
4155
|
+
size: "small",
|
|
4156
|
+
onClick: addTag,
|
|
4157
|
+
disabled: !canEdit || saving || !tagInput.trim(),
|
|
4158
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }),
|
|
4159
|
+
sx: { textTransform: "none" }
|
|
4160
|
+
},
|
|
4161
|
+
"Add"
|
|
4162
|
+
))
|
|
4163
|
+
}
|
|
4164
|
+
}
|
|
4165
|
+
)), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: canEdit ? "" : "Wire a renameTemplate callback to enable editing from here", placement: "top" }, /* @__PURE__ */ React57__default.default.createElement("span", null, /* @__PURE__ */ React57__default.default.createElement(
|
|
4166
|
+
material.Button,
|
|
4167
|
+
{
|
|
4168
|
+
variant: "contained",
|
|
4169
|
+
size: "small",
|
|
4170
|
+
fullWidth: true,
|
|
4171
|
+
onClick: handleSave,
|
|
4172
|
+
disabled: !canEdit || saving || !dirty || !name.trim(),
|
|
4173
|
+
startIcon: justSaved ? /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.CheckOutlined, { fontSize: "small" }) : null
|
|
4174
|
+
},
|
|
4175
|
+
saving ? "Saving\u2026" : justSaved ? "Saved" : "Save details"
|
|
4176
|
+
))));
|
|
4036
4177
|
}
|
|
4037
4178
|
|
|
4038
4179
|
// src/app/variables/variable-utils.ts
|
|
@@ -4206,7 +4347,7 @@ function VariablesPanel() {
|
|
|
4206
4347
|
const lastFocused = useLastFocusedEditable();
|
|
4207
4348
|
const root = document2.root;
|
|
4208
4349
|
if (!root || root.type !== "EmailLayout") {
|
|
4209
|
-
return /* @__PURE__ */
|
|
4350
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React57__default.default.createElement(material.Alert, { severity: "info" }, "Open a template to manage variables."));
|
|
4210
4351
|
}
|
|
4211
4352
|
const data = root.data;
|
|
4212
4353
|
const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
|
|
@@ -4217,9 +4358,9 @@ function VariablesPanel() {
|
|
|
4217
4358
|
sampleValue: (_b = v.sampleValue) != null ? _b : ""
|
|
4218
4359
|
};
|
|
4219
4360
|
});
|
|
4220
|
-
const usage =
|
|
4221
|
-
const declaredNames =
|
|
4222
|
-
const undeclared =
|
|
4361
|
+
const usage = React57.useMemo(() => collectTokenUsage(document2), [document2]);
|
|
4362
|
+
const declaredNames = React57.useMemo(() => new Set(variables.map((v) => v.name)), [variables]);
|
|
4363
|
+
const undeclared = React57.useMemo(
|
|
4223
4364
|
() => [...usage.keys()].filter((n) => n && !declaredNames.has(n)),
|
|
4224
4365
|
[usage, declaredNames]
|
|
4225
4366
|
);
|
|
@@ -4301,7 +4442,7 @@ function VariablesPanel() {
|
|
|
4301
4442
|
} catch (e) {
|
|
4302
4443
|
}
|
|
4303
4444
|
});
|
|
4304
|
-
return /* @__PURE__ */
|
|
4445
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Add variable" }, /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React57__default.default.createElement(material.Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), ". In Preview mode, tokens render with the sample values below."), undeclared.length > 0 && /* @__PURE__ */ React57__default.default.createElement(material.Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React57__default.default.createElement(material.AlertTitle, { sx: { fontSize: 13 } }, "Undeclared in body"), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React57__default.default.createElement(
|
|
4305
4446
|
material.Chip,
|
|
4306
4447
|
{
|
|
4307
4448
|
key: name,
|
|
@@ -4309,12 +4450,12 @@ function VariablesPanel() {
|
|
|
4309
4450
|
label: name,
|
|
4310
4451
|
onClick: () => addFromToken(name),
|
|
4311
4452
|
onDelete: () => addFromToken(name),
|
|
4312
|
-
deleteIcon: /* @__PURE__ */
|
|
4453
|
+
deleteIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
4313
4454
|
sx: { fontFamily: "monospace" }
|
|
4314
4455
|
}
|
|
4315
|
-
))), /* @__PURE__ */
|
|
4456
|
+
))), /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, "Click a token to declare it.")), variables.length === 0 ? /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
|
|
4316
4457
|
var _a2;
|
|
4317
|
-
return /* @__PURE__ */
|
|
4458
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
4318
4459
|
VariableRow,
|
|
4319
4460
|
{
|
|
4320
4461
|
key: i,
|
|
@@ -4347,9 +4488,9 @@ function VariableRow({
|
|
|
4347
4488
|
onCopy
|
|
4348
4489
|
}) {
|
|
4349
4490
|
var _a, _b;
|
|
4350
|
-
const [draftName, setDraftName] =
|
|
4351
|
-
const [isEditing, setIsEditing] =
|
|
4352
|
-
|
|
4491
|
+
const [draftName, setDraftName] = React57.useState(variable.name);
|
|
4492
|
+
const [isEditing, setIsEditing] = React57.useState(false);
|
|
4493
|
+
React57.useEffect(() => {
|
|
4353
4494
|
if (!isEditing) setDraftName(variable.name);
|
|
4354
4495
|
}, [variable.name, isEditing]);
|
|
4355
4496
|
const nameError = validateVariableName(draftName, siblings, index);
|
|
@@ -4365,7 +4506,7 @@ function VariableRow({
|
|
|
4365
4506
|
onCommitRename(draftName.trim());
|
|
4366
4507
|
}
|
|
4367
4508
|
};
|
|
4368
|
-
return /* @__PURE__ */
|
|
4509
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4369
4510
|
material.TextField,
|
|
4370
4511
|
{
|
|
4371
4512
|
label: "Name",
|
|
@@ -4390,7 +4531,7 @@ function VariableRow({
|
|
|
4390
4531
|
error: Boolean(nameError),
|
|
4391
4532
|
helperText: nameError != null ? nameError : " "
|
|
4392
4533
|
}
|
|
4393
|
-
), /* @__PURE__ */
|
|
4534
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Copy {{name}}" }, /* @__PURE__ */ React57__default.default.createElement("span", null, /* @__PURE__ */ React57__default.default.createElement(
|
|
4394
4535
|
material.IconButton,
|
|
4395
4536
|
{
|
|
4396
4537
|
size: "small",
|
|
@@ -4398,8 +4539,8 @@ function VariableRow({
|
|
|
4398
4539
|
disabled: !hasName,
|
|
4399
4540
|
"aria-label": `Copy ${variable.name || "variable"} token`
|
|
4400
4541
|
},
|
|
4401
|
-
/* @__PURE__ */
|
|
4402
|
-
))), /* @__PURE__ */
|
|
4542
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
|
|
4543
|
+
))), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React57__default.default.createElement("span", null, /* @__PURE__ */ React57__default.default.createElement(
|
|
4403
4544
|
material.IconButton,
|
|
4404
4545
|
{
|
|
4405
4546
|
size: "small",
|
|
@@ -4407,16 +4548,16 @@ function VariableRow({
|
|
|
4407
4548
|
disabled: !hasName || !canInsert,
|
|
4408
4549
|
"aria-label": `Insert ${variable.name || "variable"} at cursor`
|
|
4409
4550
|
},
|
|
4410
|
-
/* @__PURE__ */
|
|
4411
|
-
))), /* @__PURE__ */
|
|
4551
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.InputOutlined, { fontSize: "small" })
|
|
4552
|
+
))), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Remove" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4412
4553
|
material.IconButton,
|
|
4413
4554
|
{
|
|
4414
4555
|
size: "small",
|
|
4415
4556
|
onClick: onRemove,
|
|
4416
4557
|
"aria-label": `Remove ${variable.name || "variable"}`
|
|
4417
4558
|
},
|
|
4418
|
-
/* @__PURE__ */
|
|
4419
|
-
)))), /* @__PURE__ */
|
|
4559
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
4560
|
+
)))), /* @__PURE__ */ React57__default.default.createElement(
|
|
4420
4561
|
material.TextField,
|
|
4421
4562
|
{
|
|
4422
4563
|
label: "Description",
|
|
@@ -4426,7 +4567,7 @@ function VariableRow({
|
|
|
4426
4567
|
onChange: (e) => onChangeDescription(e.target.value),
|
|
4427
4568
|
placeholder: "Optional"
|
|
4428
4569
|
}
|
|
4429
|
-
), /* @__PURE__ */
|
|
4570
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
4430
4571
|
material.TextField,
|
|
4431
4572
|
{
|
|
4432
4573
|
label: "Sample value",
|
|
@@ -4436,7 +4577,7 @@ function VariableRow({
|
|
|
4436
4577
|
onChange: (e) => onChangeSampleValue(e.target.value),
|
|
4437
4578
|
placeholder: "Shown in Preview mode",
|
|
4438
4579
|
InputProps: {
|
|
4439
|
-
startAdornment: /* @__PURE__ */
|
|
4580
|
+
startAdornment: /* @__PURE__ */ React57__default.default.createElement(
|
|
4440
4581
|
iconsMaterial.DataObjectOutlined,
|
|
4441
4582
|
{
|
|
4442
4583
|
fontSize: "small",
|
|
@@ -4445,7 +4586,7 @@ function VariableRow({
|
|
|
4445
4586
|
)
|
|
4446
4587
|
}
|
|
4447
4588
|
}
|
|
4448
|
-
), /* @__PURE__ */
|
|
4589
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React57__default.default.createElement(material.Chip, { size: "small", color: "warning", variant: "outlined", label: "Unused in body" }) : /* @__PURE__ */ React57__default.default.createElement(
|
|
4449
4590
|
material.Chip,
|
|
4450
4591
|
{
|
|
4451
4592
|
size: "small",
|
|
@@ -4462,6 +4603,7 @@ function InspectorDrawer({
|
|
|
4462
4603
|
exitDuration = 225,
|
|
4463
4604
|
deleteTemplate,
|
|
4464
4605
|
copyTemplate,
|
|
4606
|
+
renameTemplate,
|
|
4465
4607
|
savingEnabled = true
|
|
4466
4608
|
} = {}) {
|
|
4467
4609
|
const selectedSidebarTab = useSelectedSidebarTab();
|
|
@@ -4469,22 +4611,23 @@ function InspectorDrawer({
|
|
|
4469
4611
|
const renderCurrentSidebarPanel = () => {
|
|
4470
4612
|
switch (selectedSidebarTab) {
|
|
4471
4613
|
case "block-configuration":
|
|
4472
|
-
return /* @__PURE__ */
|
|
4614
|
+
return /* @__PURE__ */ React57__default.default.createElement(ConfigurationPanel, null);
|
|
4473
4615
|
case "styles":
|
|
4474
|
-
return /* @__PURE__ */
|
|
4616
|
+
return /* @__PURE__ */ React57__default.default.createElement(StylesPanel, null);
|
|
4475
4617
|
case "variables":
|
|
4476
|
-
return /* @__PURE__ */
|
|
4618
|
+
return /* @__PURE__ */ React57__default.default.createElement(VariablesPanel, null);
|
|
4477
4619
|
case "template-settings":
|
|
4478
|
-
return /* @__PURE__ */
|
|
4620
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
4479
4621
|
TemplatePanel,
|
|
4480
4622
|
{
|
|
4481
4623
|
deleteTemplate,
|
|
4482
|
-
copyTemplate
|
|
4624
|
+
copyTemplate,
|
|
4625
|
+
renameTemplate
|
|
4483
4626
|
}
|
|
4484
4627
|
);
|
|
4485
4628
|
}
|
|
4486
4629
|
};
|
|
4487
|
-
return /* @__PURE__ */
|
|
4630
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
4488
4631
|
material.Drawer,
|
|
4489
4632
|
{
|
|
4490
4633
|
variant: "persistent",
|
|
@@ -4506,7 +4649,7 @@ function InspectorDrawer({
|
|
|
4506
4649
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
4507
4650
|
}
|
|
4508
4651
|
},
|
|
4509
|
-
/* @__PURE__ */
|
|
4652
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React57__default.default.createElement(material.Box, { px: 1 }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4510
4653
|
material.Tabs,
|
|
4511
4654
|
{
|
|
4512
4655
|
value: selectedSidebarTab,
|
|
@@ -4514,25 +4657,25 @@ function InspectorDrawer({
|
|
|
4514
4657
|
variant: "fullWidth",
|
|
4515
4658
|
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
4516
4659
|
},
|
|
4517
|
-
/* @__PURE__ */
|
|
4518
|
-
/* @__PURE__ */
|
|
4519
|
-
/* @__PURE__ */
|
|
4520
|
-
/* @__PURE__ */
|
|
4660
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }),
|
|
4661
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }),
|
|
4662
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tab, { value: "variables", label: "Variables" }),
|
|
4663
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })
|
|
4521
4664
|
))),
|
|
4522
|
-
/* @__PURE__ */
|
|
4665
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
4523
4666
|
);
|
|
4524
4667
|
}
|
|
4525
|
-
var SnackbarContext =
|
|
4668
|
+
var SnackbarContext = React57.createContext(null);
|
|
4526
4669
|
function useSnackbar() {
|
|
4527
|
-
const context =
|
|
4670
|
+
const context = React57.useContext(SnackbarContext);
|
|
4528
4671
|
if (!context) {
|
|
4529
4672
|
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
4530
4673
|
}
|
|
4531
4674
|
return context;
|
|
4532
4675
|
}
|
|
4533
4676
|
function SnackbarProvider({ children }) {
|
|
4534
|
-
const [message, setMessage] =
|
|
4535
|
-
const [duration, setDuration] =
|
|
4677
|
+
const [message, setMessage] = React57.useState(null);
|
|
4678
|
+
const [duration, setDuration] = React57.useState(3e3);
|
|
4536
4679
|
const showMessage = (text, customDuration = 3e3) => {
|
|
4537
4680
|
setMessage(text);
|
|
4538
4681
|
setDuration(customDuration);
|
|
@@ -4540,7 +4683,7 @@ function SnackbarProvider({ children }) {
|
|
|
4540
4683
|
const handleClose = () => {
|
|
4541
4684
|
setMessage(null);
|
|
4542
4685
|
};
|
|
4543
|
-
return /* @__PURE__ */
|
|
4686
|
+
return /* @__PURE__ */ React57__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React57__default.default.createElement(
|
|
4544
4687
|
material.Snackbar,
|
|
4545
4688
|
{
|
|
4546
4689
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4587,8 +4730,8 @@ function TemplateRow({
|
|
|
4587
4730
|
onDuplicateAsTemplate
|
|
4588
4731
|
}) {
|
|
4589
4732
|
const { setCurrentTemplate } = useEmailEditor();
|
|
4590
|
-
const [hover, setHover] =
|
|
4591
|
-
const [menuAnchor, setMenuAnchor] =
|
|
4733
|
+
const [hover, setHover] = React57.useState(false);
|
|
4734
|
+
const [menuAnchor, setMenuAnchor] = React57.useState(null);
|
|
4592
4735
|
const closeMenu = () => setMenuAnchor(null);
|
|
4593
4736
|
const openMenu = (e) => {
|
|
4594
4737
|
e.stopPropagation();
|
|
@@ -4599,11 +4742,12 @@ function TemplateRow({
|
|
|
4599
4742
|
fn == null ? void 0 : fn();
|
|
4600
4743
|
};
|
|
4601
4744
|
const handleClick = () => __async(null, null, function* () {
|
|
4745
|
+
var _a;
|
|
4602
4746
|
try {
|
|
4603
4747
|
const content = yield templateLoader();
|
|
4604
4748
|
if (content) {
|
|
4605
4749
|
resetDocument(content);
|
|
4606
|
-
setCurrentTemplate(template.id, template.slug, template.kind);
|
|
4750
|
+
setCurrentTemplate(template.id, template.slug, template.kind, (_a = template.tags) != null ? _a : []);
|
|
4607
4751
|
}
|
|
4608
4752
|
} catch (error) {
|
|
4609
4753
|
console.error("Error loading template:", error);
|
|
@@ -4616,7 +4760,7 @@ function TemplateRow({
|
|
|
4616
4760
|
const hasActions = Boolean(
|
|
4617
4761
|
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
4618
4762
|
);
|
|
4619
|
-
return /* @__PURE__ */
|
|
4763
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
4620
4764
|
material.Box,
|
|
4621
4765
|
{
|
|
4622
4766
|
role: "button",
|
|
@@ -4642,7 +4786,7 @@ function TemplateRow({
|
|
|
4642
4786
|
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
4643
4787
|
}
|
|
4644
4788
|
},
|
|
4645
|
-
/* @__PURE__ */
|
|
4789
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { flexGrow: 1, minWidth: 0, pr: hasActions ? 3 : 0 } }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4646
4790
|
material.Typography,
|
|
4647
4791
|
{
|
|
4648
4792
|
variant: "body2",
|
|
@@ -4656,14 +4800,14 @@ function TemplateRow({
|
|
|
4656
4800
|
title: template.slug
|
|
4657
4801
|
},
|
|
4658
4802
|
template.slug
|
|
4659
|
-
), updated && !hasActions && /* @__PURE__ */
|
|
4803
|
+
), updated && !hasActions && /* @__PURE__ */ React57__default.default.createElement(
|
|
4660
4804
|
material.Typography,
|
|
4661
4805
|
{
|
|
4662
4806
|
variant: "caption",
|
|
4663
4807
|
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
4664
4808
|
},
|
|
4665
4809
|
updated
|
|
4666
|
-
)), template.description && /* @__PURE__ */
|
|
4810
|
+
)), template.description && /* @__PURE__ */ React57__default.default.createElement(
|
|
4667
4811
|
material.Typography,
|
|
4668
4812
|
{
|
|
4669
4813
|
variant: "caption",
|
|
@@ -4677,7 +4821,7 @@ function TemplateRow({
|
|
|
4677
4821
|
}
|
|
4678
4822
|
},
|
|
4679
4823
|
template.description
|
|
4680
|
-
), template.tags && template.tags.length > 0 && /* @__PURE__ */
|
|
4824
|
+
), template.tags && template.tags.length > 0 && /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React57__default.default.createElement(
|
|
4681
4825
|
material.Chip,
|
|
4682
4826
|
{
|
|
4683
4827
|
key: tag,
|
|
@@ -4686,7 +4830,7 @@ function TemplateRow({
|
|
|
4686
4830
|
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
4687
4831
|
}
|
|
4688
4832
|
))))),
|
|
4689
|
-
hasActions && /* @__PURE__ */
|
|
4833
|
+
hasActions && /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "More" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
4690
4834
|
material.IconButton,
|
|
4691
4835
|
{
|
|
4692
4836
|
size: "small",
|
|
@@ -4702,8 +4846,8 @@ function TemplateRow({
|
|
|
4702
4846
|
transition: "opacity 120ms"
|
|
4703
4847
|
}
|
|
4704
4848
|
},
|
|
4705
|
-
/* @__PURE__ */
|
|
4706
|
-
)), /* @__PURE__ */
|
|
4849
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.MoreVertOutlined, { fontSize: "small" })
|
|
4850
|
+
)), /* @__PURE__ */ React57__default.default.createElement(
|
|
4707
4851
|
material.Menu,
|
|
4708
4852
|
{
|
|
4709
4853
|
anchorEl: menuAnchor,
|
|
@@ -4714,14 +4858,14 @@ function TemplateRow({
|
|
|
4714
4858
|
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
4715
4859
|
slotProps: { paper: { sx: { minWidth: 200 } } }
|
|
4716
4860
|
},
|
|
4717
|
-
onRename && /* @__PURE__ */
|
|
4718
|
-
onDuplicate && /* @__PURE__ */
|
|
4719
|
-
onDuplicateAsTemplate && /* @__PURE__ */
|
|
4720
|
-
onPromote && /* @__PURE__ */
|
|
4721
|
-
onDemote && /* @__PURE__ */
|
|
4861
|
+
onRename && /* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { onClick: runAction(onRename) }, /* @__PURE__ */ React57__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DriveFileRenameOutlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, null, "Edit name & tags\u2026")),
|
|
4862
|
+
onDuplicate && /* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { onClick: runAction(onDuplicate) }, /* @__PURE__ */ React57__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, null, "Duplicate")),
|
|
4863
|
+
onDuplicateAsTemplate && /* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { onClick: runAction(onDuplicateAsTemplate) }, /* @__PURE__ */ React57__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, null, "Duplicate as template")),
|
|
4864
|
+
onPromote && /* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { onClick: runAction(onPromote) }, /* @__PURE__ */ React57__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FileUploadOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, null, "Promote to sample")),
|
|
4865
|
+
onDemote && /* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { onClick: runAction(onDemote) }, /* @__PURE__ */ React57__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FileDownloadOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, null, "Demote to template")),
|
|
4722
4866
|
onDelete && [
|
|
4723
|
-
/* @__PURE__ */
|
|
4724
|
-
/* @__PURE__ */
|
|
4867
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Divider, { key: "divider" }),
|
|
4868
|
+
/* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { key: "delete", onClick: runAction(onDelete), sx: { color: "error.main" } }, /* @__PURE__ */ React57__default.default.createElement(material.ListItemIcon, { sx: { color: "error.main" } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, null, "Delete"))
|
|
4725
4869
|
]
|
|
4726
4870
|
))
|
|
4727
4871
|
);
|
|
@@ -4836,31 +4980,31 @@ var PREVIEW_MAX = 36;
|
|
|
4836
4980
|
function iconForType(type) {
|
|
4837
4981
|
switch (type) {
|
|
4838
4982
|
case "EmailLayout":
|
|
4839
|
-
return /* @__PURE__ */
|
|
4983
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DashboardOutlined, { fontSize: "small" });
|
|
4840
4984
|
case "Heading":
|
|
4841
|
-
return /* @__PURE__ */
|
|
4985
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HMobiledataOutlined, { fontSize: "small" });
|
|
4842
4986
|
case "Text":
|
|
4843
|
-
return /* @__PURE__ */
|
|
4987
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.NotesOutlined, { fontSize: "small" });
|
|
4844
4988
|
case "Button":
|
|
4845
|
-
return /* @__PURE__ */
|
|
4989
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SmartButtonOutlined, { fontSize: "small" });
|
|
4846
4990
|
case "Image":
|
|
4847
|
-
return /* @__PURE__ */
|
|
4991
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ImageOutlined, { fontSize: "small" });
|
|
4848
4992
|
case "Avatar":
|
|
4849
|
-
return /* @__PURE__ */
|
|
4993
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AccountCircleOutlined, { fontSize: "small" });
|
|
4850
4994
|
case "Signature":
|
|
4851
|
-
return /* @__PURE__ */
|
|
4995
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ContactMailOutlined, { fontSize: "small" });
|
|
4852
4996
|
case "Divider":
|
|
4853
|
-
return /* @__PURE__ */
|
|
4997
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, { fontSize: "small" });
|
|
4854
4998
|
case "Spacer":
|
|
4855
|
-
return /* @__PURE__ */
|
|
4999
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.Crop32Outlined, { fontSize: "small" });
|
|
4856
5000
|
case "Html":
|
|
4857
|
-
return /* @__PURE__ */
|
|
5001
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HtmlOutlined, { fontSize: "small" });
|
|
4858
5002
|
case "Container":
|
|
4859
|
-
return /* @__PURE__ */
|
|
5003
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" });
|
|
4860
5004
|
case "ColumnsContainer":
|
|
4861
|
-
return /* @__PURE__ */
|
|
5005
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ViewColumnOutlined, { fontSize: "small" });
|
|
4862
5006
|
default:
|
|
4863
|
-
return /* @__PURE__ */
|
|
5007
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.BusinessOutlined, { fontSize: "small" });
|
|
4864
5008
|
}
|
|
4865
5009
|
}
|
|
4866
5010
|
function previewText(text) {
|
|
@@ -4938,7 +5082,7 @@ function buildNode(id, doc, ctx) {
|
|
|
4938
5082
|
id: `${id}::col${colIdx}`,
|
|
4939
5083
|
label: `Column ${colIdx + 1}`,
|
|
4940
5084
|
preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
|
|
4941
|
-
icon: /* @__PURE__ */
|
|
5085
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
|
|
4942
5086
|
children: colChildren,
|
|
4943
5087
|
containerChildrenRef: parentForCol
|
|
4944
5088
|
});
|
|
@@ -4985,7 +5129,7 @@ var DRAG_MIME = "application/x-email-editor-block";
|
|
|
4985
5129
|
function OutlinePanel() {
|
|
4986
5130
|
const document2 = useDocument();
|
|
4987
5131
|
const selectedBlockId = useSelectedBlockId();
|
|
4988
|
-
const [dragging, setDragging] =
|
|
5132
|
+
const [dragging, setDragging] = React57.useState(null);
|
|
4989
5133
|
const tree = buildNode(ROOT_BLOCK_ID2, document2);
|
|
4990
5134
|
const performMove = (payload, targetParent, targetIndex) => {
|
|
4991
5135
|
const patch = buildMovePatch(
|
|
@@ -5000,7 +5144,7 @@ function OutlinePanel() {
|
|
|
5000
5144
|
setSelectedBlockId(payload.sourceId);
|
|
5001
5145
|
}
|
|
5002
5146
|
};
|
|
5003
|
-
return /* @__PURE__ */
|
|
5147
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, null, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5, px: 0.5 } }, "Outline"), /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { display: "block", color: "text.secondary", px: 0.5, mb: 1 } }, "Click a row to select. Drag a row to reorder or move it into a container."), tree ? /* @__PURE__ */ React57__default.default.createElement(
|
|
5004
5148
|
OutlineRow,
|
|
5005
5149
|
{
|
|
5006
5150
|
node: tree,
|
|
@@ -5011,7 +5155,7 @@ function OutlinePanel() {
|
|
|
5011
5155
|
setDragging,
|
|
5012
5156
|
performMove
|
|
5013
5157
|
}
|
|
5014
|
-
) : /* @__PURE__ */
|
|
5158
|
+
) : /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
|
|
5015
5159
|
}
|
|
5016
5160
|
function OutlineRow({
|
|
5017
5161
|
node,
|
|
@@ -5022,8 +5166,8 @@ function OutlineRow({
|
|
|
5022
5166
|
setDragging,
|
|
5023
5167
|
performMove
|
|
5024
5168
|
}) {
|
|
5025
|
-
const [expanded, setExpanded] =
|
|
5026
|
-
const [dropPos, setDropPos] =
|
|
5169
|
+
const [expanded, setExpanded] = React57.useState(true);
|
|
5170
|
+
const [dropPos, setDropPos] = React57.useState(null);
|
|
5027
5171
|
const hasChildren = Boolean(node.children && node.children.length > 0);
|
|
5028
5172
|
const isSelectable = !node.id.includes("::");
|
|
5029
5173
|
const isSelected = isSelectable && selectedBlockId === node.id;
|
|
@@ -5097,7 +5241,7 @@ function OutlineRow({
|
|
|
5097
5241
|
const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
|
|
5098
5242
|
if (patch) setDocument(patch);
|
|
5099
5243
|
};
|
|
5100
|
-
return /* @__PURE__ */
|
|
5244
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { position: "relative" } }, dropPos === "before" && /* @__PURE__ */ React57__default.default.createElement(DropLine, { depth }), /* @__PURE__ */ React57__default.default.createElement(
|
|
5101
5245
|
material.Stack,
|
|
5102
5246
|
{
|
|
5103
5247
|
direction: "row",
|
|
@@ -5130,7 +5274,7 @@ function OutlineRow({
|
|
|
5130
5274
|
userSelect: "none"
|
|
5131
5275
|
}
|
|
5132
5276
|
},
|
|
5133
|
-
hasChildren ? /* @__PURE__ */
|
|
5277
|
+
hasChildren ? /* @__PURE__ */ React57__default.default.createElement(
|
|
5134
5278
|
material.Box,
|
|
5135
5279
|
{
|
|
5136
5280
|
role: "button",
|
|
@@ -5141,9 +5285,9 @@ function OutlineRow({
|
|
|
5141
5285
|
},
|
|
5142
5286
|
sx: { display: "flex", alignItems: "center", cursor: "pointer" }
|
|
5143
5287
|
},
|
|
5144
|
-
expanded ? /* @__PURE__ */
|
|
5145
|
-
) : /* @__PURE__ */
|
|
5146
|
-
/* @__PURE__ */
|
|
5288
|
+
expanded ? /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ChevronRight, { fontSize: "small" })
|
|
5289
|
+
) : /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { width: 20 } }),
|
|
5290
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5147
5291
|
material.Box,
|
|
5148
5292
|
{
|
|
5149
5293
|
sx: {
|
|
@@ -5155,7 +5299,7 @@ function OutlineRow({
|
|
|
5155
5299
|
},
|
|
5156
5300
|
node.icon
|
|
5157
5301
|
),
|
|
5158
|
-
/* @__PURE__ */
|
|
5302
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5159
5303
|
material.Typography,
|
|
5160
5304
|
{
|
|
5161
5305
|
variant: "body2",
|
|
@@ -5167,7 +5311,7 @@ function OutlineRow({
|
|
|
5167
5311
|
},
|
|
5168
5312
|
node.label
|
|
5169
5313
|
),
|
|
5170
|
-
node.preview && /* @__PURE__ */
|
|
5314
|
+
node.preview && /* @__PURE__ */ React57__default.default.createElement(
|
|
5171
5315
|
material.Typography,
|
|
5172
5316
|
{
|
|
5173
5317
|
variant: "body2",
|
|
@@ -5183,7 +5327,7 @@ function OutlineRow({
|
|
|
5183
5327
|
"\u2014 ",
|
|
5184
5328
|
node.preview
|
|
5185
5329
|
),
|
|
5186
|
-
canMove && /* @__PURE__ */
|
|
5330
|
+
canMove && /* @__PURE__ */ React57__default.default.createElement(
|
|
5187
5331
|
material.Box,
|
|
5188
5332
|
{
|
|
5189
5333
|
className: "outline-move-btns",
|
|
@@ -5194,7 +5338,7 @@ function OutlineRow({
|
|
|
5194
5338
|
transition: "opacity 120ms"
|
|
5195
5339
|
}
|
|
5196
5340
|
},
|
|
5197
|
-
/* @__PURE__ */
|
|
5341
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Move up" }, /* @__PURE__ */ React57__default.default.createElement("span", null, /* @__PURE__ */ React57__default.default.createElement(
|
|
5198
5342
|
material.IconButton,
|
|
5199
5343
|
{
|
|
5200
5344
|
size: "small",
|
|
@@ -5206,9 +5350,9 @@ function OutlineRow({
|
|
|
5206
5350
|
"aria-label": `Move ${node.label} up`,
|
|
5207
5351
|
sx: { p: 0.25 }
|
|
5208
5352
|
},
|
|
5209
|
-
/* @__PURE__ */
|
|
5353
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.KeyboardArrowUp, { fontSize: "small" })
|
|
5210
5354
|
))),
|
|
5211
|
-
/* @__PURE__ */
|
|
5355
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Move down" }, /* @__PURE__ */ React57__default.default.createElement("span", null, /* @__PURE__ */ React57__default.default.createElement(
|
|
5212
5356
|
material.IconButton,
|
|
5213
5357
|
{
|
|
5214
5358
|
size: "small",
|
|
@@ -5220,10 +5364,10 @@ function OutlineRow({
|
|
|
5220
5364
|
"aria-label": `Move ${node.label} down`,
|
|
5221
5365
|
sx: { p: 0.25 }
|
|
5222
5366
|
},
|
|
5223
|
-
/* @__PURE__ */
|
|
5367
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.KeyboardArrowDown, { fontSize: "small" })
|
|
5224
5368
|
)))
|
|
5225
5369
|
)
|
|
5226
|
-
), dropPos === "after" && /* @__PURE__ */
|
|
5370
|
+
), dropPos === "after" && /* @__PURE__ */ React57__default.default.createElement(DropLine, { depth })), hasChildren && expanded && /* @__PURE__ */ React57__default.default.createElement(material.Box, null, node.children.map((child) => /* @__PURE__ */ React57__default.default.createElement(
|
|
5227
5371
|
OutlineRow,
|
|
5228
5372
|
{
|
|
5229
5373
|
key: child.id,
|
|
@@ -5238,7 +5382,7 @@ function OutlineRow({
|
|
|
5238
5382
|
))));
|
|
5239
5383
|
}
|
|
5240
5384
|
function DropLine({ depth }) {
|
|
5241
|
-
return /* @__PURE__ */
|
|
5385
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
5242
5386
|
material.Box,
|
|
5243
5387
|
{
|
|
5244
5388
|
sx: {
|
|
@@ -5246,7 +5390,7 @@ function DropLine({ depth }) {
|
|
|
5246
5390
|
height: 0
|
|
5247
5391
|
}
|
|
5248
5392
|
},
|
|
5249
|
-
/* @__PURE__ */
|
|
5393
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5250
5394
|
material.Box,
|
|
5251
5395
|
{
|
|
5252
5396
|
sx: {
|
|
@@ -5272,11 +5416,11 @@ function NewTemplatePickerDialog({
|
|
|
5272
5416
|
onClose,
|
|
5273
5417
|
onCreate
|
|
5274
5418
|
}) {
|
|
5275
|
-
const [name, setName] =
|
|
5276
|
-
const [selectedStarter, setSelectedStarter] =
|
|
5277
|
-
const [error, setError] =
|
|
5278
|
-
const [busy, setBusy] =
|
|
5279
|
-
|
|
5419
|
+
const [name, setName] = React57.useState("");
|
|
5420
|
+
const [selectedStarter, setSelectedStarter] = React57.useState(null);
|
|
5421
|
+
const [error, setError] = React57.useState(null);
|
|
5422
|
+
const [busy, setBusy] = React57.useState(false);
|
|
5423
|
+
React57.useEffect(() => {
|
|
5280
5424
|
if (open) {
|
|
5281
5425
|
setName(defaultName != null ? defaultName : kind === "sample" ? "New sample" : "New template");
|
|
5282
5426
|
setSelectedStarter(null);
|
|
@@ -5307,7 +5451,7 @@ function NewTemplatePickerDialog({
|
|
|
5307
5451
|
}
|
|
5308
5452
|
});
|
|
5309
5453
|
const pickable = samples.filter((s) => s.id !== "empty-email");
|
|
5310
|
-
return /* @__PURE__ */
|
|
5454
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Dialog, { open, onClose: busy ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React57__default.default.createElement(material.DialogTitle, null, kind === "sample" ? "New sample" : "New template"), /* @__PURE__ */ React57__default.default.createElement(material.DialogContent, { dividers: true }, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "subtitle2", sx: { mb: 1 } }, "Start from"), /* @__PURE__ */ React57__default.default.createElement(
|
|
5311
5455
|
material.List,
|
|
5312
5456
|
{
|
|
5313
5457
|
dense: true,
|
|
@@ -5321,24 +5465,24 @@ function NewTemplatePickerDialog({
|
|
|
5321
5465
|
overflowY: "auto"
|
|
5322
5466
|
}
|
|
5323
5467
|
},
|
|
5324
|
-
/* @__PURE__ */
|
|
5468
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5325
5469
|
material.ListItemButton,
|
|
5326
5470
|
{
|
|
5327
5471
|
selected: selectedStarter === null,
|
|
5328
5472
|
onClick: () => setSelectedStarter(null)
|
|
5329
5473
|
},
|
|
5330
|
-
/* @__PURE__ */
|
|
5474
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.InsertDriveFileOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, { primary: "Blank", secondary: "Start from an empty email" }))
|
|
5331
5475
|
),
|
|
5332
|
-
pickable.map((s) => /* @__PURE__ */
|
|
5476
|
+
pickable.map((s) => /* @__PURE__ */ React57__default.default.createElement(
|
|
5333
5477
|
material.ListItemButton,
|
|
5334
5478
|
{
|
|
5335
5479
|
key: s.id,
|
|
5336
5480
|
selected: selectedStarter === s.id,
|
|
5337
5481
|
onClick: () => setSelectedStarter(s.id)
|
|
5338
5482
|
},
|
|
5339
|
-
/* @__PURE__ */
|
|
5483
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DescriptionOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React57__default.default.createElement(material.ListItemText, { primary: s.slug, secondary: s.description }))
|
|
5340
5484
|
))
|
|
5341
|
-
), /* @__PURE__ */
|
|
5485
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
5342
5486
|
material.TextField,
|
|
5343
5487
|
{
|
|
5344
5488
|
autoFocus: true,
|
|
@@ -5357,7 +5501,7 @@ function NewTemplatePickerDialog({
|
|
|
5357
5501
|
helperText: error != null ? error : " ",
|
|
5358
5502
|
disabled: busy
|
|
5359
5503
|
}
|
|
5360
|
-
)), /* @__PURE__ */
|
|
5504
|
+
)), /* @__PURE__ */ React57__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React57__default.default.createElement(material.Button, { onClick: onClose, disabled: busy }, "Cancel"), /* @__PURE__ */ React57__default.default.createElement(material.Button, { variant: "contained", onClick: handleCreate, disabled: busy }, busy ? "Creating\u2026" : `Create ${kind}`)));
|
|
5361
5505
|
}
|
|
5362
5506
|
function RenameDialog({
|
|
5363
5507
|
open,
|
|
@@ -5367,12 +5511,12 @@ function RenameDialog({
|
|
|
5367
5511
|
onClose,
|
|
5368
5512
|
onSubmit
|
|
5369
5513
|
}) {
|
|
5370
|
-
const [slug, setSlug] =
|
|
5371
|
-
const [tags, setTags] =
|
|
5372
|
-
const [tagInput, setTagInput] =
|
|
5373
|
-
const [error, setError] =
|
|
5374
|
-
const [submitting, setSubmitting] =
|
|
5375
|
-
|
|
5514
|
+
const [slug, setSlug] = React57.useState(currentSlug);
|
|
5515
|
+
const [tags, setTags] = React57.useState(currentTags);
|
|
5516
|
+
const [tagInput, setTagInput] = React57.useState("");
|
|
5517
|
+
const [error, setError] = React57.useState(null);
|
|
5518
|
+
const [submitting, setSubmitting] = React57.useState(false);
|
|
5519
|
+
React57.useEffect(() => {
|
|
5376
5520
|
if (open) {
|
|
5377
5521
|
setSlug(currentSlug);
|
|
5378
5522
|
setTags(currentTags);
|
|
@@ -5419,7 +5563,7 @@ function RenameDialog({
|
|
|
5419
5563
|
setSubmitting(false);
|
|
5420
5564
|
}
|
|
5421
5565
|
});
|
|
5422
|
-
return /* @__PURE__ */
|
|
5566
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Dialog, { open, onClose: submitting ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React57__default.default.createElement(material.DialogTitle, null, "Edit details"), /* @__PURE__ */ React57__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
5423
5567
|
material.TextField,
|
|
5424
5568
|
{
|
|
5425
5569
|
autoFocus: true,
|
|
@@ -5439,7 +5583,7 @@ function RenameDialog({
|
|
|
5439
5583
|
if (e.key === "Enter" && !submitting) handleSubmit();
|
|
5440
5584
|
}
|
|
5441
5585
|
}
|
|
5442
|
-
), /* @__PURE__ */
|
|
5586
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 1, mb: 0.5 } }, "Tags"), tags.length > 0 ? /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React57__default.default.createElement(
|
|
5443
5587
|
material.Chip,
|
|
5444
5588
|
{
|
|
5445
5589
|
key: tag,
|
|
@@ -5447,7 +5591,7 @@ function RenameDialog({
|
|
|
5447
5591
|
size: "small",
|
|
5448
5592
|
onDelete: submitting ? void 0 : () => removeTag(tag)
|
|
5449
5593
|
}
|
|
5450
|
-
))) : /* @__PURE__ */
|
|
5594
|
+
))) : /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, "No tags yet. Suggested: ", /* @__PURE__ */ React57__default.default.createElement("i", null, "transactional"), ", ", /* @__PURE__ */ React57__default.default.createElement("i", null, "marketing"), "."), /* @__PURE__ */ React57__default.default.createElement(
|
|
5451
5595
|
material.TextField,
|
|
5452
5596
|
{
|
|
5453
5597
|
size: "small",
|
|
@@ -5466,20 +5610,20 @@ function RenameDialog({
|
|
|
5466
5610
|
}
|
|
5467
5611
|
},
|
|
5468
5612
|
InputProps: {
|
|
5469
|
-
endAdornment: /* @__PURE__ */
|
|
5613
|
+
endAdornment: /* @__PURE__ */ React57__default.default.createElement(material.InputAdornment, { position: "end" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
5470
5614
|
material.Button,
|
|
5471
5615
|
{
|
|
5472
5616
|
size: "small",
|
|
5473
5617
|
onClick: addTag,
|
|
5474
5618
|
disabled: !tagInput.trim() || submitting,
|
|
5475
|
-
startIcon: /* @__PURE__ */
|
|
5619
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }),
|
|
5476
5620
|
sx: { textTransform: "none" }
|
|
5477
5621
|
},
|
|
5478
5622
|
"Add"
|
|
5479
5623
|
))
|
|
5480
5624
|
}
|
|
5481
5625
|
}
|
|
5482
|
-
), /* @__PURE__ */
|
|
5626
|
+
), /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { minHeight: 8 } })), /* @__PURE__ */ React57__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React57__default.default.createElement(material.Button, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React57__default.default.createElement(
|
|
5483
5627
|
material.Button,
|
|
5484
5628
|
{
|
|
5485
5629
|
onClick: handleSubmit,
|
|
@@ -5497,10 +5641,10 @@ function SaveTemplateDialog({
|
|
|
5497
5641
|
defaultName = "",
|
|
5498
5642
|
error: externalError = null
|
|
5499
5643
|
}) {
|
|
5500
|
-
const [templateName, setTemplateName] =
|
|
5501
|
-
const [internalError, setInternalError] =
|
|
5502
|
-
const [isSubmitting, setIsSubmitting] =
|
|
5503
|
-
|
|
5644
|
+
const [templateName, setTemplateName] = React57.useState(defaultName);
|
|
5645
|
+
const [internalError, setInternalError] = React57.useState("");
|
|
5646
|
+
const [isSubmitting, setIsSubmitting] = React57.useState(false);
|
|
5647
|
+
React57.useEffect(() => {
|
|
5504
5648
|
if (open) {
|
|
5505
5649
|
setTemplateName(defaultName);
|
|
5506
5650
|
setInternalError("");
|
|
@@ -5548,7 +5692,7 @@ function SaveTemplateDialog({
|
|
|
5548
5692
|
setInternalError("");
|
|
5549
5693
|
onClose();
|
|
5550
5694
|
};
|
|
5551
|
-
return /* @__PURE__ */
|
|
5695
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
5552
5696
|
material.Dialog,
|
|
5553
5697
|
{
|
|
5554
5698
|
open,
|
|
@@ -5556,8 +5700,8 @@ function SaveTemplateDialog({
|
|
|
5556
5700
|
maxWidth: "sm",
|
|
5557
5701
|
fullWidth: true
|
|
5558
5702
|
},
|
|
5559
|
-
/* @__PURE__ */
|
|
5560
|
-
/* @__PURE__ */
|
|
5703
|
+
/* @__PURE__ */ React57__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
|
|
5704
|
+
/* @__PURE__ */ React57__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React57__default.default.createElement(
|
|
5561
5705
|
material.TextField,
|
|
5562
5706
|
{
|
|
5563
5707
|
autoFocus: true,
|
|
@@ -5579,7 +5723,7 @@ function SaveTemplateDialog({
|
|
|
5579
5723
|
disabled: isSubmitting
|
|
5580
5724
|
}
|
|
5581
5725
|
))),
|
|
5582
|
-
/* @__PURE__ */
|
|
5726
|
+
/* @__PURE__ */ React57__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React57__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React57__default.default.createElement(
|
|
5583
5727
|
material.Button,
|
|
5584
5728
|
{
|
|
5585
5729
|
onClick: handleSave,
|
|
@@ -5649,19 +5793,19 @@ function SamplesDrawer({
|
|
|
5649
5793
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
5650
5794
|
const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
|
|
5651
5795
|
const { showMessage } = useSnackbar();
|
|
5652
|
-
const [samples, setSamples] =
|
|
5653
|
-
const [templates, setTemplates] =
|
|
5654
|
-
const [loadingSamples, setLoadingSamples] =
|
|
5655
|
-
const [loadingTemplates, setLoadingTemplates] =
|
|
5656
|
-
const [templatesError, setTemplatesError] =
|
|
5657
|
-
const [activeLeftTab, setActiveLeftTab] =
|
|
5658
|
-
const [search, setSearch] =
|
|
5659
|
-
const [sortKey, setSortKey] =
|
|
5660
|
-
const [activeTags, setActiveTags] =
|
|
5661
|
-
const [renameTarget, setRenameTarget] =
|
|
5662
|
-
const [pendingSaveAs, setPendingSaveAs] =
|
|
5663
|
-
const [newError, setNewError] =
|
|
5664
|
-
const [pickerKind, setPickerKind] =
|
|
5796
|
+
const [samples, setSamples] = React57.useState([EMPTY_TEMPLATE]);
|
|
5797
|
+
const [templates, setTemplates] = React57.useState([]);
|
|
5798
|
+
const [loadingSamples, setLoadingSamples] = React57.useState(false);
|
|
5799
|
+
const [loadingTemplates, setLoadingTemplates] = React57.useState(false);
|
|
5800
|
+
const [templatesError, setTemplatesError] = React57.useState(null);
|
|
5801
|
+
const [activeLeftTab, setActiveLeftTab] = React57.useState("templates");
|
|
5802
|
+
const [search, setSearch] = React57.useState("");
|
|
5803
|
+
const [sortKey, setSortKey] = React57.useState("updatedAt");
|
|
5804
|
+
const [activeTags, setActiveTags] = React57.useState([]);
|
|
5805
|
+
const [renameTarget, setRenameTarget] = React57.useState(null);
|
|
5806
|
+
const [pendingSaveAs, setPendingSaveAs] = React57.useState(null);
|
|
5807
|
+
const [newError, setNewError] = React57.useState(null);
|
|
5808
|
+
const [pickerKind, setPickerKind] = React57.useState(null);
|
|
5665
5809
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
5666
5810
|
if (templateId === "empty-email") {
|
|
5667
5811
|
return empty_email_message_default;
|
|
@@ -5672,7 +5816,7 @@ function SamplesDrawer({
|
|
|
5672
5816
|
return null;
|
|
5673
5817
|
});
|
|
5674
5818
|
const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
|
|
5675
|
-
|
|
5819
|
+
React57.useEffect(() => {
|
|
5676
5820
|
if (!enabled || !samplesDrawerOpen || !loadSamples) return;
|
|
5677
5821
|
setLoadingSamples(true);
|
|
5678
5822
|
loadSamples().then((results) => {
|
|
@@ -5707,11 +5851,11 @@ function SamplesDrawer({
|
|
|
5707
5851
|
setTemplates((prev) => prev.some((t) => t.id === id) ? prev : [...prev, row]);
|
|
5708
5852
|
}
|
|
5709
5853
|
};
|
|
5710
|
-
|
|
5854
|
+
React57.useEffect(() => {
|
|
5711
5855
|
if (!enabled || !loadTemplates) return;
|
|
5712
5856
|
refreshTemplates();
|
|
5713
5857
|
}, [enabled, loadTemplates]);
|
|
5714
|
-
|
|
5858
|
+
React57.useEffect(() => {
|
|
5715
5859
|
const handler = (e) => {
|
|
5716
5860
|
const detail = e.detail;
|
|
5717
5861
|
if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
|
|
@@ -5719,7 +5863,7 @@ function SamplesDrawer({
|
|
|
5719
5863
|
window.addEventListener("templateListUpdated", handler);
|
|
5720
5864
|
return () => window.removeEventListener("templateListUpdated", handler);
|
|
5721
5865
|
}, []);
|
|
5722
|
-
const { templateRows, sampleRows } =
|
|
5866
|
+
const { templateRows, sampleRows } = React57.useMemo(() => {
|
|
5723
5867
|
const byId = /* @__PURE__ */ new Map();
|
|
5724
5868
|
for (const s of samples) byId.set(s.id, s);
|
|
5725
5869
|
for (const t of templates) byId.set(t.id, t);
|
|
@@ -5729,14 +5873,14 @@ function SamplesDrawer({
|
|
|
5729
5873
|
sampleRows: all.filter((t) => t.kind === "sample")
|
|
5730
5874
|
};
|
|
5731
5875
|
}, [samples, templates]);
|
|
5732
|
-
const allTags =
|
|
5876
|
+
const allTags = React57.useMemo(() => {
|
|
5733
5877
|
var _a2, _b2;
|
|
5734
5878
|
const set = /* @__PURE__ */ new Set();
|
|
5735
5879
|
for (const t of templateRows) (_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
5736
5880
|
for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
|
|
5737
5881
|
return Array.from(set).sort();
|
|
5738
5882
|
}, [templateRows, sampleRows]);
|
|
5739
|
-
const matchesSearchAndTags =
|
|
5883
|
+
const matchesSearchAndTags = React57.useMemo(() => {
|
|
5740
5884
|
const term = search.trim().toLowerCase();
|
|
5741
5885
|
return (t) => {
|
|
5742
5886
|
if (term) {
|
|
@@ -5750,11 +5894,11 @@ function SamplesDrawer({
|
|
|
5750
5894
|
return true;
|
|
5751
5895
|
};
|
|
5752
5896
|
}, [search, activeTags]);
|
|
5753
|
-
const filteredTemplates =
|
|
5897
|
+
const filteredTemplates = React57.useMemo(
|
|
5754
5898
|
() => templateRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
5755
5899
|
[templateRows, matchesSearchAndTags, sortKey]
|
|
5756
5900
|
);
|
|
5757
|
-
const filteredSamples =
|
|
5901
|
+
const filteredSamples = React57.useMemo(
|
|
5758
5902
|
() => sampleRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
5759
5903
|
[sampleRows, matchesSearchAndTags, sortKey]
|
|
5760
5904
|
);
|
|
@@ -5785,16 +5929,15 @@ function SamplesDrawer({
|
|
|
5785
5929
|
showMessage("Template deleted");
|
|
5786
5930
|
};
|
|
5787
5931
|
const handleRenameSubmit = (newSlug, opts) => __async(null, null, function* () {
|
|
5932
|
+
var _a2, _b2;
|
|
5788
5933
|
if (!renameTarget || !renameTemplate) return;
|
|
5789
5934
|
yield renameTemplate(renameTarget.id, newSlug, opts);
|
|
5790
|
-
const
|
|
5791
|
-
|
|
5792
|
-
return t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : t.tags }) : t;
|
|
5793
|
-
};
|
|
5935
|
+
const newTags = (_b2 = (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : renameTarget.tags) != null ? _b2 : [];
|
|
5936
|
+
const patch = (t) => t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: newTags }) : t;
|
|
5794
5937
|
setTemplates((prev) => prev.map(patch));
|
|
5795
5938
|
setSamples((prev) => prev.map(patch));
|
|
5796
5939
|
if (currentTemplateId === renameTarget.id) {
|
|
5797
|
-
setCurrentTemplate(renameTarget.id, newSlug);
|
|
5940
|
+
setCurrentTemplate(renameTarget.id, newSlug, void 0, newTags);
|
|
5798
5941
|
}
|
|
5799
5942
|
showMessage("Details saved");
|
|
5800
5943
|
});
|
|
@@ -5901,7 +6044,7 @@ function SamplesDrawer({
|
|
|
5901
6044
|
return null;
|
|
5902
6045
|
}
|
|
5903
6046
|
const existingSlugs = templates.map((t) => t.slug);
|
|
5904
|
-
return /* @__PURE__ */
|
|
6047
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
5905
6048
|
material.Drawer,
|
|
5906
6049
|
{
|
|
5907
6050
|
variant: "persistent",
|
|
@@ -5916,7 +6059,7 @@ function SamplesDrawer({
|
|
|
5916
6059
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
5917
6060
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
5918
6061
|
},
|
|
5919
|
-
/* @__PURE__ */
|
|
6062
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5920
6063
|
material.Stack,
|
|
5921
6064
|
{
|
|
5922
6065
|
py: 1,
|
|
@@ -5926,16 +6069,16 @@ function SamplesDrawer({
|
|
|
5926
6069
|
spacing: 1.5,
|
|
5927
6070
|
sx: { overflowY: "auto" }
|
|
5928
6071
|
},
|
|
5929
|
-
/* @__PURE__ */
|
|
6072
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "h6", component: "h1" }, "Library"), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: activeLeftTab === "samples" ? "New sample" : "New template" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
5930
6073
|
material.IconButton,
|
|
5931
6074
|
{
|
|
5932
6075
|
size: "small",
|
|
5933
6076
|
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
5934
6077
|
"aria-label": activeLeftTab === "samples" ? "New sample" : "New template"
|
|
5935
6078
|
},
|
|
5936
|
-
/* @__PURE__ */
|
|
6079
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
5937
6080
|
))),
|
|
5938
|
-
/* @__PURE__ */
|
|
6081
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5939
6082
|
material.Tabs,
|
|
5940
6083
|
{
|
|
5941
6084
|
value: activeLeftTab,
|
|
@@ -5943,11 +6086,11 @@ function SamplesDrawer({
|
|
|
5943
6086
|
variant: "fullWidth",
|
|
5944
6087
|
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
5945
6088
|
},
|
|
5946
|
-
/* @__PURE__ */
|
|
5947
|
-
/* @__PURE__ */
|
|
5948
|
-
/* @__PURE__ */
|
|
6089
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tab, { value: "templates", label: "Templates", disabled: !loadTemplates }),
|
|
6090
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tab, { value: "samples", label: "Samples" }),
|
|
6091
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tab, { value: "outline", label: "Outline" })
|
|
5949
6092
|
),
|
|
5950
|
-
activeLeftTab === "outline" ? /* @__PURE__ */
|
|
6093
|
+
activeLeftTab === "outline" ? /* @__PURE__ */ React57__default.default.createElement(OutlinePanel, null) : /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
5951
6094
|
material.TextField,
|
|
5952
6095
|
{
|
|
5953
6096
|
size: "small",
|
|
@@ -5955,10 +6098,10 @@ function SamplesDrawer({
|
|
|
5955
6098
|
value: search,
|
|
5956
6099
|
onChange: (e) => setSearch(e.target.value),
|
|
5957
6100
|
InputProps: {
|
|
5958
|
-
startAdornment: /* @__PURE__ */
|
|
6101
|
+
startAdornment: /* @__PURE__ */ React57__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
5959
6102
|
}
|
|
5960
6103
|
}
|
|
5961
|
-
), /* @__PURE__ */
|
|
6104
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
5962
6105
|
material.TextField,
|
|
5963
6106
|
{
|
|
5964
6107
|
select: true,
|
|
@@ -5967,8 +6110,8 @@ function SamplesDrawer({
|
|
|
5967
6110
|
value: sortKey,
|
|
5968
6111
|
onChange: (e) => setSortKey(e.target.value)
|
|
5969
6112
|
},
|
|
5970
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
5971
|
-
), allTags.length > 0 && /* @__PURE__ */
|
|
6113
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React57__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, opt.label))
|
|
6114
|
+
), allTags.length > 0 && /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React57__default.default.createElement(
|
|
5972
6115
|
material.Chip,
|
|
5973
6116
|
{
|
|
5974
6117
|
label: "All",
|
|
@@ -5978,7 +6121,7 @@ function SamplesDrawer({
|
|
|
5978
6121
|
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
5979
6122
|
onClick: () => setActiveTags([])
|
|
5980
6123
|
}
|
|
5981
|
-
), allTags.map((tag) => /* @__PURE__ */
|
|
6124
|
+
), allTags.map((tag) => /* @__PURE__ */ React57__default.default.createElement(
|
|
5982
6125
|
material.Chip,
|
|
5983
6126
|
{
|
|
5984
6127
|
key: tag,
|
|
@@ -5989,7 +6132,7 @@ function SamplesDrawer({
|
|
|
5989
6132
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
5990
6133
|
onClick: () => toggleTag(tag)
|
|
5991
6134
|
}
|
|
5992
|
-
))), activeLeftTab === "templates" ? /* @__PURE__ */
|
|
6135
|
+
))), activeLeftTab === "templates" ? /* @__PURE__ */ React57__default.default.createElement(material.Box, null, loadingTemplates ? /* @__PURE__ */ React57__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React57__default.default.createElement(material.CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React57__default.default.createElement(material.Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React57__default.default.createElement(
|
|
5993
6136
|
TemplateRow,
|
|
5994
6137
|
{
|
|
5995
6138
|
key: template.id,
|
|
@@ -6001,7 +6144,7 @@ function SamplesDrawer({
|
|
|
6001
6144
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
6002
6145
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
6003
6146
|
}
|
|
6004
|
-
))) : /* @__PURE__ */
|
|
6147
|
+
))) : /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")) : /* @__PURE__ */ React57__default.default.createElement(material.Box, null, loadingSamples ? /* @__PURE__ */ React57__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React57__default.default.createElement(material.CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React57__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React57__default.default.createElement(
|
|
6005
6148
|
TemplateRow,
|
|
6006
6149
|
{
|
|
6007
6150
|
key: sample.id,
|
|
@@ -6013,9 +6156,9 @@ function SamplesDrawer({
|
|
|
6013
6156
|
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
6014
6157
|
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
6015
6158
|
}
|
|
6016
|
-
))) : /* @__PURE__ */
|
|
6159
|
+
))) : /* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? "No samples available" : "No samples match your filters")))
|
|
6017
6160
|
)
|
|
6018
|
-
), renameTarget && /* @__PURE__ */
|
|
6161
|
+
), renameTarget && /* @__PURE__ */ React57__default.default.createElement(
|
|
6019
6162
|
RenameDialog,
|
|
6020
6163
|
{
|
|
6021
6164
|
open: !!renameTarget,
|
|
@@ -6025,7 +6168,7 @@ function SamplesDrawer({
|
|
|
6025
6168
|
onClose: () => setRenameTarget(null),
|
|
6026
6169
|
onSubmit: handleRenameSubmit
|
|
6027
6170
|
}
|
|
6028
|
-
), /* @__PURE__ */
|
|
6171
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
6029
6172
|
SaveTemplateDialog,
|
|
6030
6173
|
{
|
|
6031
6174
|
open: !!pendingSaveAs,
|
|
@@ -6038,7 +6181,7 @@ function SamplesDrawer({
|
|
|
6038
6181
|
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
6039
6182
|
error: newError
|
|
6040
6183
|
}
|
|
6041
|
-
), /* @__PURE__ */
|
|
6184
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
6042
6185
|
NewTemplatePickerDialog,
|
|
6043
6186
|
{
|
|
6044
6187
|
open: pickerKind !== null,
|
|
@@ -6062,7 +6205,7 @@ var ICON_SX = {
|
|
|
6062
6205
|
borderColor: "cadet.300"
|
|
6063
6206
|
};
|
|
6064
6207
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
6065
|
-
return /* @__PURE__ */
|
|
6208
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6066
6209
|
material.Button,
|
|
6067
6210
|
{
|
|
6068
6211
|
sx: BUTTON_SX2,
|
|
@@ -6071,14 +6214,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
6071
6214
|
onClick();
|
|
6072
6215
|
}
|
|
6073
6216
|
},
|
|
6074
|
-
/* @__PURE__ */
|
|
6075
|
-
/* @__PURE__ */
|
|
6217
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
6218
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
6076
6219
|
);
|
|
6077
6220
|
}
|
|
6078
6221
|
var BUTTONS = [
|
|
6079
6222
|
{
|
|
6080
6223
|
label: "Heading",
|
|
6081
|
-
icon: /* @__PURE__ */
|
|
6224
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
6082
6225
|
block: () => ({
|
|
6083
6226
|
type: "Heading",
|
|
6084
6227
|
data: {
|
|
@@ -6091,7 +6234,7 @@ var BUTTONS = [
|
|
|
6091
6234
|
},
|
|
6092
6235
|
{
|
|
6093
6236
|
label: "Text",
|
|
6094
|
-
icon: /* @__PURE__ */
|
|
6237
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
6095
6238
|
block: () => ({
|
|
6096
6239
|
type: "Text",
|
|
6097
6240
|
data: {
|
|
@@ -6105,7 +6248,7 @@ var BUTTONS = [
|
|
|
6105
6248
|
},
|
|
6106
6249
|
{
|
|
6107
6250
|
label: "Button",
|
|
6108
|
-
icon: /* @__PURE__ */
|
|
6251
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
6109
6252
|
block: () => ({
|
|
6110
6253
|
type: "Button",
|
|
6111
6254
|
data: {
|
|
@@ -6119,7 +6262,7 @@ var BUTTONS = [
|
|
|
6119
6262
|
},
|
|
6120
6263
|
{
|
|
6121
6264
|
label: "Image",
|
|
6122
|
-
icon: /* @__PURE__ */
|
|
6265
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
6123
6266
|
block: () => ({
|
|
6124
6267
|
type: "Image",
|
|
6125
6268
|
data: {
|
|
@@ -6135,7 +6278,7 @@ var BUTTONS = [
|
|
|
6135
6278
|
},
|
|
6136
6279
|
{
|
|
6137
6280
|
label: "Avatar",
|
|
6138
|
-
icon: /* @__PURE__ */
|
|
6281
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
6139
6282
|
block: () => ({
|
|
6140
6283
|
type: "Avatar",
|
|
6141
6284
|
data: {
|
|
@@ -6149,7 +6292,7 @@ var BUTTONS = [
|
|
|
6149
6292
|
},
|
|
6150
6293
|
{
|
|
6151
6294
|
label: "Personal Signature",
|
|
6152
|
-
icon: /* @__PURE__ */
|
|
6295
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
|
|
6153
6296
|
block: () => ({
|
|
6154
6297
|
type: "Signature",
|
|
6155
6298
|
data: {
|
|
@@ -6171,7 +6314,7 @@ var BUTTONS = [
|
|
|
6171
6314
|
},
|
|
6172
6315
|
{
|
|
6173
6316
|
label: "Company Signature",
|
|
6174
|
-
icon: /* @__PURE__ */
|
|
6317
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.BusinessOutlined, null),
|
|
6175
6318
|
block: () => ({
|
|
6176
6319
|
type: "Signature",
|
|
6177
6320
|
data: {
|
|
@@ -6191,7 +6334,7 @@ var BUTTONS = [
|
|
|
6191
6334
|
},
|
|
6192
6335
|
{
|
|
6193
6336
|
label: "Divider",
|
|
6194
|
-
icon: /* @__PURE__ */
|
|
6337
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
6195
6338
|
block: () => ({
|
|
6196
6339
|
type: "Divider",
|
|
6197
6340
|
data: {
|
|
@@ -6204,7 +6347,7 @@ var BUTTONS = [
|
|
|
6204
6347
|
},
|
|
6205
6348
|
{
|
|
6206
6349
|
label: "Spacer",
|
|
6207
|
-
icon: /* @__PURE__ */
|
|
6350
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
6208
6351
|
block: () => ({
|
|
6209
6352
|
type: "Spacer",
|
|
6210
6353
|
data: {}
|
|
@@ -6212,7 +6355,7 @@ var BUTTONS = [
|
|
|
6212
6355
|
},
|
|
6213
6356
|
{
|
|
6214
6357
|
label: "Html",
|
|
6215
|
-
icon: /* @__PURE__ */
|
|
6358
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
6216
6359
|
block: () => ({
|
|
6217
6360
|
type: "Html",
|
|
6218
6361
|
data: {
|
|
@@ -6227,7 +6370,7 @@ var BUTTONS = [
|
|
|
6227
6370
|
},
|
|
6228
6371
|
{
|
|
6229
6372
|
label: "Columns",
|
|
6230
|
-
icon: /* @__PURE__ */
|
|
6373
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
6231
6374
|
block: () => ({
|
|
6232
6375
|
type: "ColumnsContainer",
|
|
6233
6376
|
data: {
|
|
@@ -6242,7 +6385,7 @@ var BUTTONS = [
|
|
|
6242
6385
|
},
|
|
6243
6386
|
{
|
|
6244
6387
|
label: "Container",
|
|
6245
|
-
icon: /* @__PURE__ */
|
|
6388
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
6246
6389
|
block: () => ({
|
|
6247
6390
|
type: "Container",
|
|
6248
6391
|
data: {
|
|
@@ -6266,7 +6409,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6266
6409
|
if (anchorEl === null) {
|
|
6267
6410
|
return null;
|
|
6268
6411
|
}
|
|
6269
|
-
return /* @__PURE__ */
|
|
6412
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6270
6413
|
material.Menu,
|
|
6271
6414
|
{
|
|
6272
6415
|
open: true,
|
|
@@ -6275,12 +6418,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6275
6418
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
6276
6419
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
6277
6420
|
},
|
|
6278
|
-
/* @__PURE__ */
|
|
6421
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React57__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
|
|
6279
6422
|
);
|
|
6280
6423
|
}
|
|
6281
6424
|
function DividerButton({ buttonElement, onClick }) {
|
|
6282
|
-
const [visible, setVisible] =
|
|
6283
|
-
|
|
6425
|
+
const [visible, setVisible] = React57.useState(false);
|
|
6426
|
+
React57.useEffect(() => {
|
|
6284
6427
|
function listener({ clientX, clientY }) {
|
|
6285
6428
|
if (!buttonElement) {
|
|
6286
6429
|
return;
|
|
@@ -6302,7 +6445,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6302
6445
|
window.removeEventListener("mousemove", listener);
|
|
6303
6446
|
};
|
|
6304
6447
|
}, [buttonElement, setVisible]);
|
|
6305
|
-
return /* @__PURE__ */
|
|
6448
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React57__default.default.createElement(
|
|
6306
6449
|
material.IconButton,
|
|
6307
6450
|
{
|
|
6308
6451
|
size: "small",
|
|
@@ -6325,11 +6468,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6325
6468
|
onClick();
|
|
6326
6469
|
}
|
|
6327
6470
|
},
|
|
6328
|
-
/* @__PURE__ */
|
|
6471
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6329
6472
|
));
|
|
6330
6473
|
}
|
|
6331
6474
|
function PlaceholderButton({ onClick }) {
|
|
6332
|
-
return /* @__PURE__ */
|
|
6475
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6333
6476
|
material.ButtonBase,
|
|
6334
6477
|
{
|
|
6335
6478
|
onClick: (ev) => {
|
|
@@ -6345,7 +6488,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
6345
6488
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
6346
6489
|
}
|
|
6347
6490
|
},
|
|
6348
|
-
/* @__PURE__ */
|
|
6491
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6349
6492
|
iconsMaterial.AddOutlined,
|
|
6350
6493
|
{
|
|
6351
6494
|
sx: {
|
|
@@ -6362,29 +6505,29 @@ function PlaceholderButton({ onClick }) {
|
|
|
6362
6505
|
|
|
6363
6506
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
6364
6507
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
6365
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
6366
|
-
const [buttonElement, setButtonElement] =
|
|
6508
|
+
const [menuAnchorEl, setMenuAnchorEl] = React57.useState(null);
|
|
6509
|
+
const [buttonElement, setButtonElement] = React57.useState(null);
|
|
6367
6510
|
const handleButtonClick = () => {
|
|
6368
6511
|
setMenuAnchorEl(buttonElement);
|
|
6369
6512
|
};
|
|
6370
6513
|
const renderButton2 = () => {
|
|
6371
6514
|
if (placeholder) {
|
|
6372
|
-
return /* @__PURE__ */
|
|
6515
|
+
return /* @__PURE__ */ React57__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
6373
6516
|
} else {
|
|
6374
|
-
return /* @__PURE__ */
|
|
6517
|
+
return /* @__PURE__ */ React57__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
6375
6518
|
}
|
|
6376
6519
|
};
|
|
6377
|
-
return /* @__PURE__ */
|
|
6520
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React57__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
6378
6521
|
}
|
|
6379
|
-
var BlockParentContext =
|
|
6522
|
+
var BlockParentContext = React57.createContext(null);
|
|
6380
6523
|
function BlockParentProvider({
|
|
6381
6524
|
info,
|
|
6382
6525
|
children
|
|
6383
6526
|
}) {
|
|
6384
|
-
return /* @__PURE__ */
|
|
6527
|
+
return /* @__PURE__ */ React57__default.default.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6385
6528
|
}
|
|
6386
6529
|
function useBlockParent() {
|
|
6387
|
-
return
|
|
6530
|
+
return React57.useContext(BlockParentContext);
|
|
6388
6531
|
}
|
|
6389
6532
|
|
|
6390
6533
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -6411,9 +6554,9 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6411
6554
|
});
|
|
6412
6555
|
};
|
|
6413
6556
|
if (!childrenIds || childrenIds.length === 0) {
|
|
6414
|
-
return /* @__PURE__ */
|
|
6557
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock }), parentRef && /* @__PURE__ */ React57__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: 0, placeholder: true }));
|
|
6415
6558
|
}
|
|
6416
|
-
return /* @__PURE__ */
|
|
6559
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React57__default.default.createElement(React57.Fragment, { key: childId }, /* @__PURE__ */ React57__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), parentRef && /* @__PURE__ */ React57__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: i }), parentRef ? /* @__PURE__ */ React57__default.default.createElement(BlockParentProvider, { info: { parent: parentRef, indexInParent: i } }, /* @__PURE__ */ React57__default.default.createElement(EditorBlock, { id: childId })) : /* @__PURE__ */ React57__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React57__default.default.createElement(AddBlockButton, { onSelect: appendBlock }), parentRef && /* @__PURE__ */ React57__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: childrenIds.length }));
|
|
6417
6560
|
}
|
|
6418
6561
|
function CanvasDropZone({
|
|
6419
6562
|
parentRef,
|
|
@@ -6422,7 +6565,7 @@ function CanvasDropZone({
|
|
|
6422
6565
|
}) {
|
|
6423
6566
|
const document2 = useDocument();
|
|
6424
6567
|
const dragging = useDraggingBlock();
|
|
6425
|
-
const [over, setOver] =
|
|
6568
|
+
const [over, setOver] = React57.useState(false);
|
|
6426
6569
|
if (!dragging) return null;
|
|
6427
6570
|
if (isDescendant(document2, dragging.sourceId, parentRef.parentId)) return null;
|
|
6428
6571
|
const handleDragOver = (e) => {
|
|
@@ -6450,7 +6593,7 @@ function CanvasDropZone({
|
|
|
6450
6593
|
}
|
|
6451
6594
|
setDraggingBlock(null);
|
|
6452
6595
|
};
|
|
6453
|
-
return /* @__PURE__ */
|
|
6596
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6454
6597
|
material.Box,
|
|
6455
6598
|
{
|
|
6456
6599
|
onDragOver: handleDragOver,
|
|
@@ -6493,13 +6636,13 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6493
6636
|
});
|
|
6494
6637
|
setSelectedBlockId(blockId);
|
|
6495
6638
|
};
|
|
6496
|
-
return /* @__PURE__ */
|
|
6639
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6497
6640
|
columns_container_default,
|
|
6498
6641
|
{
|
|
6499
6642
|
props: restProps,
|
|
6500
6643
|
style,
|
|
6501
6644
|
columns: [
|
|
6502
|
-
/* @__PURE__ */
|
|
6645
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6503
6646
|
EditorChildrenIds,
|
|
6504
6647
|
{
|
|
6505
6648
|
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
@@ -6507,7 +6650,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6507
6650
|
onChange: (change) => updateColumn(0, change)
|
|
6508
6651
|
}
|
|
6509
6652
|
),
|
|
6510
|
-
/* @__PURE__ */
|
|
6653
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6511
6654
|
EditorChildrenIds,
|
|
6512
6655
|
{
|
|
6513
6656
|
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
@@ -6515,7 +6658,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6515
6658
|
onChange: (change) => updateColumn(1, change)
|
|
6516
6659
|
}
|
|
6517
6660
|
),
|
|
6518
|
-
/* @__PURE__ */
|
|
6661
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6519
6662
|
EditorChildrenIds,
|
|
6520
6663
|
{
|
|
6521
6664
|
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
@@ -6532,7 +6675,7 @@ function ContainerEditor({ style, props }) {
|
|
|
6532
6675
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
6533
6676
|
const document2 = useDocument();
|
|
6534
6677
|
const currentBlockId = useCurrentBlockId();
|
|
6535
|
-
return /* @__PURE__ */
|
|
6678
|
+
return /* @__PURE__ */ React57__default.default.createElement(container_default, { style }, /* @__PURE__ */ React57__default.default.createElement(
|
|
6536
6679
|
EditorChildrenIds,
|
|
6537
6680
|
{
|
|
6538
6681
|
childrenIds,
|
|
@@ -6639,7 +6782,7 @@ function EmailLayoutEditor(props) {
|
|
|
6639
6782
|
const document2 = useDocument();
|
|
6640
6783
|
const currentBlockId = useCurrentBlockId();
|
|
6641
6784
|
const selectedBlockId = useSelectedBlockId();
|
|
6642
|
-
const handleDelete =
|
|
6785
|
+
const handleDelete = React57.useCallback((e) => {
|
|
6643
6786
|
var _a2, _b2, _c2;
|
|
6644
6787
|
if (e.key !== "Delete" && e.key !== "Backspace") return;
|
|
6645
6788
|
if (!selectedBlockId) return;
|
|
@@ -6670,7 +6813,7 @@ function EmailLayoutEditor(props) {
|
|
|
6670
6813
|
delete nDocument[selectedBlockId];
|
|
6671
6814
|
resetDocument(nDocument);
|
|
6672
6815
|
}, [selectedBlockId, document2]);
|
|
6673
|
-
const handleCopy =
|
|
6816
|
+
const handleCopy = React57.useCallback((e) => {
|
|
6674
6817
|
if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
|
|
6675
6818
|
if (!selectedBlockId) return;
|
|
6676
6819
|
const target = e.target;
|
|
@@ -6683,7 +6826,7 @@ function EmailLayoutEditor(props) {
|
|
|
6683
6826
|
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
|
|
6684
6827
|
navigator.clipboard.writeText(payload);
|
|
6685
6828
|
}, [selectedBlockId, document2]);
|
|
6686
|
-
const handlePaste =
|
|
6829
|
+
const handlePaste = React57.useCallback((e) => __async(null, null, function* () {
|
|
6687
6830
|
var _a2;
|
|
6688
6831
|
const target = e.target;
|
|
6689
6832
|
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
@@ -6714,7 +6857,7 @@ function EmailLayoutEditor(props) {
|
|
|
6714
6857
|
resetDocument(doc);
|
|
6715
6858
|
setSelectedBlockId(newRootId);
|
|
6716
6859
|
}), [document2, childrenIds, selectedBlockId, currentBlockId]);
|
|
6717
|
-
|
|
6860
|
+
React57.useEffect(() => {
|
|
6718
6861
|
window.addEventListener("keydown", handleDelete);
|
|
6719
6862
|
window.addEventListener("keydown", handleCopy);
|
|
6720
6863
|
window.addEventListener("paste", handlePaste);
|
|
@@ -6733,7 +6876,7 @@ function EmailLayoutEditor(props) {
|
|
|
6733
6876
|
lineHeight: "1.5",
|
|
6734
6877
|
margin: "0"
|
|
6735
6878
|
};
|
|
6736
|
-
const editorChildren = /* @__PURE__ */
|
|
6879
|
+
const editorChildren = /* @__PURE__ */ React57__default.default.createElement(
|
|
6737
6880
|
EditorChildrenIds,
|
|
6738
6881
|
{
|
|
6739
6882
|
childrenIds,
|
|
@@ -6761,7 +6904,7 @@ function EmailLayoutEditor(props) {
|
|
|
6761
6904
|
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
6762
6905
|
};
|
|
6763
6906
|
if (props.backdropDisabled) {
|
|
6764
|
-
return /* @__PURE__ */
|
|
6907
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6765
6908
|
"div",
|
|
6766
6909
|
{
|
|
6767
6910
|
onClick: () => {
|
|
@@ -6774,7 +6917,7 @@ function EmailLayoutEditor(props) {
|
|
|
6774
6917
|
minHeight: "100%"
|
|
6775
6918
|
})
|
|
6776
6919
|
},
|
|
6777
|
-
/* @__PURE__ */
|
|
6920
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6778
6921
|
"div",
|
|
6779
6922
|
{
|
|
6780
6923
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6782,11 +6925,11 @@ function EmailLayoutEditor(props) {
|
|
|
6782
6925
|
padding: "32px"
|
|
6783
6926
|
})
|
|
6784
6927
|
},
|
|
6785
|
-
/* @__PURE__ */
|
|
6928
|
+
/* @__PURE__ */ React57__default.default.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
6786
6929
|
)
|
|
6787
6930
|
);
|
|
6788
6931
|
}
|
|
6789
|
-
return /* @__PURE__ */
|
|
6932
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6790
6933
|
"div",
|
|
6791
6934
|
{
|
|
6792
6935
|
onClick: () => {
|
|
@@ -6799,7 +6942,7 @@ function EmailLayoutEditor(props) {
|
|
|
6799
6942
|
minHeight: "100%"
|
|
6800
6943
|
})
|
|
6801
6944
|
},
|
|
6802
|
-
/* @__PURE__ */
|
|
6945
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6803
6946
|
"div",
|
|
6804
6947
|
{
|
|
6805
6948
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6807,7 +6950,7 @@ function EmailLayoutEditor(props) {
|
|
|
6807
6950
|
padding: "32px 0"
|
|
6808
6951
|
})
|
|
6809
6952
|
},
|
|
6810
|
-
/* @__PURE__ */
|
|
6953
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6811
6954
|
"table",
|
|
6812
6955
|
{
|
|
6813
6956
|
align: "center",
|
|
@@ -6831,7 +6974,7 @@ function EmailLayoutEditor(props) {
|
|
|
6831
6974
|
cellPadding: "0",
|
|
6832
6975
|
border: 0
|
|
6833
6976
|
},
|
|
6834
|
-
/* @__PURE__ */
|
|
6977
|
+
/* @__PURE__ */ React57__default.default.createElement("tbody", null, /* @__PURE__ */ React57__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React57__default.default.createElement("td", null, editorChildren)))
|
|
6835
6978
|
)
|
|
6836
6979
|
)
|
|
6837
6980
|
);
|
|
@@ -6991,7 +7134,7 @@ function TuneMenu({ blockId }) {
|
|
|
6991
7134
|
resetDocument(nDocument);
|
|
6992
7135
|
setSelectedBlockId(blockId);
|
|
6993
7136
|
};
|
|
6994
|
-
return /* @__PURE__ */
|
|
7137
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, null, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
|
|
6995
7138
|
}
|
|
6996
7139
|
|
|
6997
7140
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
@@ -7000,7 +7143,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7000
7143
|
const hoveredBlockId = useHoveredBlockId();
|
|
7001
7144
|
const draggingBlock = useDraggingBlock();
|
|
7002
7145
|
const blockParent = useBlockParent();
|
|
7003
|
-
const [mouseInside, setMouseInside] =
|
|
7146
|
+
const [mouseInside, setMouseInside] = React57.useState(false);
|
|
7004
7147
|
const blockId = useCurrentBlockId();
|
|
7005
7148
|
const isBeingDragged = (draggingBlock == null ? void 0 : draggingBlock.sourceId) === blockId;
|
|
7006
7149
|
let outline;
|
|
@@ -7013,7 +7156,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7013
7156
|
if (selectedBlockId !== blockId) {
|
|
7014
7157
|
return null;
|
|
7015
7158
|
}
|
|
7016
|
-
return /* @__PURE__ */
|
|
7159
|
+
return /* @__PURE__ */ React57__default.default.createElement(TuneMenu, { blockId });
|
|
7017
7160
|
};
|
|
7018
7161
|
const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
|
|
7019
7162
|
const handleDragStart = (e) => {
|
|
@@ -7026,7 +7169,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7026
7169
|
const handleDragEnd = () => {
|
|
7027
7170
|
setDraggingBlock(null);
|
|
7028
7171
|
};
|
|
7029
|
-
return /* @__PURE__ */
|
|
7172
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
7030
7173
|
material.Box,
|
|
7031
7174
|
{
|
|
7032
7175
|
draggable,
|
|
@@ -7117,8 +7260,8 @@ function ButtonEditor({ style, props }) {
|
|
|
7117
7260
|
const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
|
|
7118
7261
|
const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
|
|
7119
7262
|
const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
|
|
7120
|
-
const [localText, setLocalText] =
|
|
7121
|
-
|
|
7263
|
+
const [localText, setLocalText] = React57.useState(text);
|
|
7264
|
+
React57.useEffect(() => {
|
|
7122
7265
|
setLocalText(text);
|
|
7123
7266
|
}, [text]);
|
|
7124
7267
|
const padding = getButtonSizePadding2(props);
|
|
@@ -7171,7 +7314,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7171
7314
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7172
7315
|
});
|
|
7173
7316
|
};
|
|
7174
|
-
return /* @__PURE__ */
|
|
7317
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7175
7318
|
"input",
|
|
7176
7319
|
{
|
|
7177
7320
|
type: "text",
|
|
@@ -7188,18 +7331,18 @@ function ButtonEditor({ style, props }) {
|
|
|
7188
7331
|
}
|
|
7189
7332
|
));
|
|
7190
7333
|
}
|
|
7191
|
-
return /* @__PURE__ */
|
|
7334
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React57__default.default.createElement("span", null, text)));
|
|
7192
7335
|
}
|
|
7193
7336
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
7194
|
-
const textareaRef =
|
|
7195
|
-
const [selection, setSelection] =
|
|
7196
|
-
const [linkPrompt, setLinkPrompt] =
|
|
7197
|
-
const pendingSelectionRef =
|
|
7198
|
-
const textRef =
|
|
7199
|
-
|
|
7337
|
+
const textareaRef = React57.useRef(null);
|
|
7338
|
+
const [selection, setSelection] = React57.useState({ start: 0, end: 0 });
|
|
7339
|
+
const [linkPrompt, setLinkPrompt] = React57.useState(false);
|
|
7340
|
+
const pendingSelectionRef = React57.useRef(null);
|
|
7341
|
+
const textRef = React57.useRef(text);
|
|
7342
|
+
React57.useEffect(() => {
|
|
7200
7343
|
textRef.current = text;
|
|
7201
7344
|
}, [text]);
|
|
7202
|
-
const syncSelection =
|
|
7345
|
+
const syncSelection = React57.useCallback(
|
|
7203
7346
|
(start, end) => {
|
|
7204
7347
|
const next = { start, end };
|
|
7205
7348
|
setSelection(next);
|
|
@@ -7207,7 +7350,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7207
7350
|
},
|
|
7208
7351
|
[trackSelection]
|
|
7209
7352
|
);
|
|
7210
|
-
const trackFocus =
|
|
7353
|
+
const trackFocus = React57.useCallback(
|
|
7211
7354
|
(e) => {
|
|
7212
7355
|
var _a, _b;
|
|
7213
7356
|
const el = e.currentTarget;
|
|
@@ -7217,7 +7360,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7217
7360
|
},
|
|
7218
7361
|
[syncSelection]
|
|
7219
7362
|
);
|
|
7220
|
-
|
|
7363
|
+
React57.useEffect(() => {
|
|
7221
7364
|
const target = pendingSelectionRef.current;
|
|
7222
7365
|
if (!target) return;
|
|
7223
7366
|
const ta = textareaRef.current;
|
|
@@ -7227,7 +7370,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7227
7370
|
syncSelection(target.start, target.end);
|
|
7228
7371
|
pendingSelectionRef.current = null;
|
|
7229
7372
|
}, [text, syncSelection]);
|
|
7230
|
-
|
|
7373
|
+
React57.useEffect(() => {
|
|
7231
7374
|
if (!isSelected || selection.start === selection.end) {
|
|
7232
7375
|
setLinkPrompt(false);
|
|
7233
7376
|
}
|
|
@@ -7320,9 +7463,9 @@ function InlineFormattingToolbar({
|
|
|
7320
7463
|
onLinkSubmit,
|
|
7321
7464
|
onLinkCancel
|
|
7322
7465
|
}) {
|
|
7323
|
-
const [url, setUrl] =
|
|
7324
|
-
const inputRef =
|
|
7325
|
-
|
|
7466
|
+
const [url, setUrl] = React57.useState("");
|
|
7467
|
+
const inputRef = React57.useRef(null);
|
|
7468
|
+
React57.useEffect(() => {
|
|
7326
7469
|
if (linkPrompt) {
|
|
7327
7470
|
setUrl("");
|
|
7328
7471
|
setTimeout(() => {
|
|
@@ -7332,7 +7475,7 @@ function InlineFormattingToolbar({
|
|
|
7332
7475
|
}
|
|
7333
7476
|
}, [linkPrompt]);
|
|
7334
7477
|
const preventBlur = (e) => e.preventDefault();
|
|
7335
|
-
return /* @__PURE__ */
|
|
7478
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React57__default.default.createElement(material.Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, linkPrompt ? /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7336
7479
|
material.TextField,
|
|
7337
7480
|
{
|
|
7338
7481
|
inputRef,
|
|
@@ -7354,7 +7497,7 @@ function InlineFormattingToolbar({
|
|
|
7354
7497
|
},
|
|
7355
7498
|
sx: { width: 220 }
|
|
7356
7499
|
}
|
|
7357
|
-
)) : /* @__PURE__ */
|
|
7500
|
+
)) : /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { size: "small", onClick: onBold, title: "Bold (Cmd+B)", "aria-label": "Bold" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { size: "small", onClick: onItalic, title: "Italic (Cmd+I)", "aria-label": "Italic" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { size: "small", onClick: onLinkRequest, title: "Link (Cmd+K)", "aria-label": "Link" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.LinkOutlined, { fontSize: "small" })))));
|
|
7358
7501
|
}
|
|
7359
7502
|
|
|
7360
7503
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -7427,11 +7570,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7427
7570
|
const isSelected = selectedBlockId === blockId;
|
|
7428
7571
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
7429
7572
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
7430
|
-
const [localText, setLocalText] =
|
|
7573
|
+
const [localText, setLocalText] = React57.useState(textContent);
|
|
7431
7574
|
const isMarkdown = (_c = props == null ? void 0 : props.markdown) != null ? _c : false;
|
|
7432
7575
|
const rootBlock = document2.root;
|
|
7433
7576
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
7434
|
-
|
|
7577
|
+
React57.useEffect(() => {
|
|
7435
7578
|
setLocalText(textContent);
|
|
7436
7579
|
}, [textContent]);
|
|
7437
7580
|
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -7477,9 +7620,9 @@ function HeadingEditor({ style, props }) {
|
|
|
7477
7620
|
const handleTextChange = (e) => {
|
|
7478
7621
|
commitText(e.target.value);
|
|
7479
7622
|
};
|
|
7480
|
-
const displayRef =
|
|
7481
|
-
const lastDisplayHeightRef =
|
|
7482
|
-
|
|
7623
|
+
const displayRef = React57.useRef(null);
|
|
7624
|
+
const lastDisplayHeightRef = React57.useRef(0);
|
|
7625
|
+
React57.useLayoutEffect(() => {
|
|
7483
7626
|
if (!isSelected && displayRef.current) {
|
|
7484
7627
|
const h = displayRef.current.offsetHeight;
|
|
7485
7628
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -7505,11 +7648,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7505
7648
|
});
|
|
7506
7649
|
}
|
|
7507
7650
|
});
|
|
7508
|
-
|
|
7651
|
+
React57.useLayoutEffect(() => {
|
|
7509
7652
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7510
7653
|
}, [localText, isSelected]);
|
|
7511
7654
|
if (isSelected) {
|
|
7512
|
-
return /* @__PURE__ */
|
|
7655
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
7513
7656
|
"textarea",
|
|
7514
7657
|
{
|
|
7515
7658
|
ref: textareaRef,
|
|
@@ -7527,7 +7670,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7527
7670
|
rows: 1,
|
|
7528
7671
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7529
7672
|
}
|
|
7530
|
-
), /* @__PURE__ */
|
|
7673
|
+
), /* @__PURE__ */ React57__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7531
7674
|
}
|
|
7532
7675
|
const headingProps = isMarkdown ? {
|
|
7533
7676
|
ref: displayRef,
|
|
@@ -7536,11 +7679,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7536
7679
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
7537
7680
|
switch (level) {
|
|
7538
7681
|
case "h1":
|
|
7539
|
-
return /* @__PURE__ */
|
|
7682
|
+
return /* @__PURE__ */ React57__default.default.createElement("h1", __spreadValues({}, headingProps));
|
|
7540
7683
|
case "h2":
|
|
7541
|
-
return /* @__PURE__ */
|
|
7684
|
+
return /* @__PURE__ */ React57__default.default.createElement("h2", __spreadValues({}, headingProps));
|
|
7542
7685
|
case "h3":
|
|
7543
|
-
return /* @__PURE__ */
|
|
7686
|
+
return /* @__PURE__ */ React57__default.default.createElement("h3", __spreadValues({}, headingProps));
|
|
7544
7687
|
}
|
|
7545
7688
|
}
|
|
7546
7689
|
function HtmlEditor({ style, props }) {
|
|
@@ -7549,8 +7692,8 @@ function HtmlEditor({ style, props }) {
|
|
|
7549
7692
|
const selectedBlockId = useSelectedBlockId();
|
|
7550
7693
|
const isSelected = selectedBlockId === blockId;
|
|
7551
7694
|
const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
|
|
7552
|
-
const [localContents, setLocalContents] =
|
|
7553
|
-
|
|
7695
|
+
const [localContents, setLocalContents] = React57.useState(contents);
|
|
7696
|
+
React57.useEffect(() => {
|
|
7554
7697
|
setLocalContents(contents);
|
|
7555
7698
|
}, [contents]);
|
|
7556
7699
|
const cssStyle = {
|
|
@@ -7605,7 +7748,7 @@ function HtmlEditor({ style, props }) {
|
|
|
7605
7748
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7606
7749
|
});
|
|
7607
7750
|
};
|
|
7608
|
-
return /* @__PURE__ */
|
|
7751
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7609
7752
|
"textarea",
|
|
7610
7753
|
{
|
|
7611
7754
|
value: localContents,
|
|
@@ -7625,9 +7768,9 @@ function HtmlEditor({ style, props }) {
|
|
|
7625
7768
|
));
|
|
7626
7769
|
}
|
|
7627
7770
|
if (!contents) {
|
|
7628
|
-
return /* @__PURE__ */
|
|
7771
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle });
|
|
7629
7772
|
}
|
|
7630
|
-
return /* @__PURE__ */
|
|
7773
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
7631
7774
|
}
|
|
7632
7775
|
function getImageBorderRadius2(shape, size) {
|
|
7633
7776
|
switch (shape) {
|
|
@@ -7660,36 +7803,36 @@ function SignatureEditor({ style, props }) {
|
|
|
7660
7803
|
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
7661
7804
|
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
7662
7805
|
const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
|
|
7663
|
-
const [localGreeting, setLocalGreeting] =
|
|
7664
|
-
const [localName, setLocalName] =
|
|
7665
|
-
const [localTitle, setLocalTitle] =
|
|
7666
|
-
const [localCompany, setLocalCompany] =
|
|
7667
|
-
const [localAddress, setLocalAddress] =
|
|
7668
|
-
const [localEmail, setLocalEmail] =
|
|
7669
|
-
const [localPhone, setLocalPhone] =
|
|
7670
|
-
const [localWebsite, setLocalWebsite] =
|
|
7671
|
-
|
|
7806
|
+
const [localGreeting, setLocalGreeting] = React57.useState(greeting);
|
|
7807
|
+
const [localName, setLocalName] = React57.useState(name);
|
|
7808
|
+
const [localTitle, setLocalTitle] = React57.useState(title);
|
|
7809
|
+
const [localCompany, setLocalCompany] = React57.useState(company);
|
|
7810
|
+
const [localAddress, setLocalAddress] = React57.useState(address);
|
|
7811
|
+
const [localEmail, setLocalEmail] = React57.useState(email);
|
|
7812
|
+
const [localPhone, setLocalPhone] = React57.useState(phone);
|
|
7813
|
+
const [localWebsite, setLocalWebsite] = React57.useState(website);
|
|
7814
|
+
React57.useEffect(() => {
|
|
7672
7815
|
setLocalGreeting(greeting);
|
|
7673
7816
|
}, [greeting]);
|
|
7674
|
-
|
|
7817
|
+
React57.useEffect(() => {
|
|
7675
7818
|
setLocalName(name);
|
|
7676
7819
|
}, [name]);
|
|
7677
|
-
|
|
7820
|
+
React57.useEffect(() => {
|
|
7678
7821
|
setLocalTitle(title);
|
|
7679
7822
|
}, [title]);
|
|
7680
|
-
|
|
7823
|
+
React57.useEffect(() => {
|
|
7681
7824
|
setLocalCompany(company);
|
|
7682
7825
|
}, [company]);
|
|
7683
|
-
|
|
7826
|
+
React57.useEffect(() => {
|
|
7684
7827
|
setLocalAddress(address);
|
|
7685
7828
|
}, [address]);
|
|
7686
|
-
|
|
7829
|
+
React57.useEffect(() => {
|
|
7687
7830
|
setLocalEmail(email);
|
|
7688
7831
|
}, [email]);
|
|
7689
|
-
|
|
7832
|
+
React57.useEffect(() => {
|
|
7690
7833
|
setLocalPhone(phone);
|
|
7691
7834
|
}, [phone]);
|
|
7692
|
-
|
|
7835
|
+
React57.useEffect(() => {
|
|
7693
7836
|
setLocalWebsite(website);
|
|
7694
7837
|
}, [website]);
|
|
7695
7838
|
const updateProps = (updates) => {
|
|
@@ -7742,7 +7885,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7742
7885
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
7743
7886
|
padding: (style == null ? void 0 : style.padding) ? `${style.padding.top}px ${style.padding.right}px ${style.padding.bottom}px ${style.padding.left}px` : void 0
|
|
7744
7887
|
};
|
|
7745
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
7888
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React57__default.default.createElement(
|
|
7746
7889
|
"img",
|
|
7747
7890
|
{
|
|
7748
7891
|
src: imageUrl,
|
|
@@ -7760,7 +7903,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7760
7903
|
}
|
|
7761
7904
|
}
|
|
7762
7905
|
) : null;
|
|
7763
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
7906
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React57__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7764
7907
|
"input",
|
|
7765
7908
|
{
|
|
7766
7909
|
value: localGreeting,
|
|
@@ -7771,8 +7914,8 @@ function SignatureEditor({ style, props }) {
|
|
|
7771
7914
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
7772
7915
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
7773
7916
|
}
|
|
7774
|
-
)) : greeting ? /* @__PURE__ */
|
|
7775
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
7917
|
+
)) : greeting ? /* @__PURE__ */ React57__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
7918
|
+
const textContent = isSelected ? /* @__PURE__ */ React57__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7776
7919
|
"input",
|
|
7777
7920
|
{
|
|
7778
7921
|
value: localName,
|
|
@@ -7783,7 +7926,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7783
7926
|
placeholder: "Name",
|
|
7784
7927
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
7785
7928
|
}
|
|
7786
|
-
), /* @__PURE__ */
|
|
7929
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7787
7930
|
"input",
|
|
7788
7931
|
{
|
|
7789
7932
|
value: localTitle,
|
|
@@ -7794,7 +7937,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7794
7937
|
placeholder: "Title",
|
|
7795
7938
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7796
7939
|
}
|
|
7797
|
-
), /* @__PURE__ */
|
|
7940
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7798
7941
|
"input",
|
|
7799
7942
|
{
|
|
7800
7943
|
value: localCompany,
|
|
@@ -7805,7 +7948,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7805
7948
|
placeholder: "Company",
|
|
7806
7949
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7807
7950
|
}
|
|
7808
|
-
), /* @__PURE__ */
|
|
7951
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7809
7952
|
"input",
|
|
7810
7953
|
{
|
|
7811
7954
|
value: localAddress,
|
|
@@ -7816,7 +7959,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7816
7959
|
placeholder: "Address",
|
|
7817
7960
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7818
7961
|
}
|
|
7819
|
-
), /* @__PURE__ */
|
|
7962
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7820
7963
|
"input",
|
|
7821
7964
|
{
|
|
7822
7965
|
value: localEmail,
|
|
@@ -7827,7 +7970,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7827
7970
|
placeholder: "Email",
|
|
7828
7971
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
7829
7972
|
}
|
|
7830
|
-
), /* @__PURE__ */
|
|
7973
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7831
7974
|
"input",
|
|
7832
7975
|
{
|
|
7833
7976
|
value: localPhone,
|
|
@@ -7838,7 +7981,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7838
7981
|
placeholder: "Phone",
|
|
7839
7982
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7840
7983
|
}
|
|
7841
|
-
), /* @__PURE__ */
|
|
7984
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7842
7985
|
"input",
|
|
7843
7986
|
{
|
|
7844
7987
|
value: localWebsite,
|
|
@@ -7849,11 +7992,11 @@ function SignatureEditor({ style, props }) {
|
|
|
7849
7992
|
placeholder: "Website",
|
|
7850
7993
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7851
7994
|
}
|
|
7852
|
-
)) : /* @__PURE__ */
|
|
7995
|
+
)) : /* @__PURE__ */ React57__default.default.createElement("div", null, name && /* @__PURE__ */ React57__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React57__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React57__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React57__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React57__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React57__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React57__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React57__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React57__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React57__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React57__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
|
|
7853
7996
|
if (layout === "vertical") {
|
|
7854
|
-
return /* @__PURE__ */
|
|
7997
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React57__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
7855
7998
|
}
|
|
7856
|
-
return /* @__PURE__ */
|
|
7999
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React57__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React57__default.default.createElement("tbody", null, /* @__PURE__ */ React57__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React57__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React57__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
7857
8000
|
}
|
|
7858
8001
|
function getFontFamily10(fontFamily) {
|
|
7859
8002
|
switch (fontFamily) {
|
|
@@ -7913,11 +8056,11 @@ function TextEditor({ style, props }) {
|
|
|
7913
8056
|
const document2 = useDocument();
|
|
7914
8057
|
const isSelected = selectedBlockId === blockId;
|
|
7915
8058
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
7916
|
-
const [localText, setLocalText] =
|
|
8059
|
+
const [localText, setLocalText] = React57.useState(textContent);
|
|
7917
8060
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
7918
8061
|
const rootBlock = document2.root;
|
|
7919
8062
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
7920
|
-
|
|
8063
|
+
React57.useEffect(() => {
|
|
7921
8064
|
setLocalText(textContent);
|
|
7922
8065
|
}, [textContent]);
|
|
7923
8066
|
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -7965,9 +8108,9 @@ function TextEditor({ style, props }) {
|
|
|
7965
8108
|
const handleTextChange = (e) => {
|
|
7966
8109
|
commitText(e.target.value);
|
|
7967
8110
|
};
|
|
7968
|
-
const displayRef =
|
|
7969
|
-
const lastDisplayHeightRef =
|
|
7970
|
-
|
|
8111
|
+
const displayRef = React57.useRef(null);
|
|
8112
|
+
const lastDisplayHeightRef = React57.useRef(0);
|
|
8113
|
+
React57.useLayoutEffect(() => {
|
|
7971
8114
|
if (!isSelected && displayRef.current) {
|
|
7972
8115
|
const h = displayRef.current.offsetHeight;
|
|
7973
8116
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -7993,11 +8136,11 @@ function TextEditor({ style, props }) {
|
|
|
7993
8136
|
});
|
|
7994
8137
|
}
|
|
7995
8138
|
});
|
|
7996
|
-
|
|
8139
|
+
React57.useLayoutEffect(() => {
|
|
7997
8140
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7998
8141
|
}, [localText, isSelected]);
|
|
7999
8142
|
if (isSelected) {
|
|
8000
|
-
return /* @__PURE__ */
|
|
8143
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
8001
8144
|
"textarea",
|
|
8002
8145
|
{
|
|
8003
8146
|
ref: textareaRef,
|
|
@@ -8015,10 +8158,10 @@ function TextEditor({ style, props }) {
|
|
|
8015
8158
|
rows: 1,
|
|
8016
8159
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
8017
8160
|
}
|
|
8018
|
-
), /* @__PURE__ */
|
|
8161
|
+
), /* @__PURE__ */ React57__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
8019
8162
|
}
|
|
8020
8163
|
if (isMarkdown) {
|
|
8021
|
-
return /* @__PURE__ */
|
|
8164
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8022
8165
|
"div",
|
|
8023
8166
|
{
|
|
8024
8167
|
ref: displayRef,
|
|
@@ -8027,34 +8170,34 @@ function TextEditor({ style, props }) {
|
|
|
8027
8170
|
}
|
|
8028
8171
|
);
|
|
8029
8172
|
}
|
|
8030
|
-
return /* @__PURE__ */
|
|
8173
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
8031
8174
|
}
|
|
8032
8175
|
|
|
8033
8176
|
// src/editor/core.tsx
|
|
8034
8177
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
8035
8178
|
Avatar: {
|
|
8036
8179
|
schema: AvatarPropsSchema,
|
|
8037
|
-
Component: (props) => /* @__PURE__ */
|
|
8180
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
8038
8181
|
},
|
|
8039
8182
|
Button: {
|
|
8040
8183
|
schema: ButtonPropsSchema,
|
|
8041
|
-
Component: (props) => /* @__PURE__ */
|
|
8184
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
8042
8185
|
},
|
|
8043
8186
|
Container: {
|
|
8044
8187
|
schema: container_props_schema_default,
|
|
8045
|
-
Component: (props) => /* @__PURE__ */
|
|
8188
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
8046
8189
|
},
|
|
8047
8190
|
ColumnsContainer: {
|
|
8048
8191
|
schema: columns_container_props_schema_default2,
|
|
8049
|
-
Component: (props) => /* @__PURE__ */
|
|
8192
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
8050
8193
|
},
|
|
8051
8194
|
Heading: {
|
|
8052
8195
|
schema: HeadingPropsSchema,
|
|
8053
|
-
Component: (props) => /* @__PURE__ */
|
|
8196
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
8054
8197
|
},
|
|
8055
8198
|
Html: {
|
|
8056
8199
|
schema: HtmlPropsSchema,
|
|
8057
|
-
Component: (props) => /* @__PURE__ */
|
|
8200
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
8058
8201
|
},
|
|
8059
8202
|
Image: {
|
|
8060
8203
|
schema: ImagePropsSchema,
|
|
@@ -8066,28 +8209,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
8066
8209
|
linkHref: null
|
|
8067
8210
|
})
|
|
8068
8211
|
});
|
|
8069
|
-
return /* @__PURE__ */
|
|
8212
|
+
return /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
8070
8213
|
}
|
|
8071
8214
|
},
|
|
8072
8215
|
Text: {
|
|
8073
8216
|
schema: TextPropsSchema,
|
|
8074
|
-
Component: (props) => /* @__PURE__ */
|
|
8217
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
8075
8218
|
},
|
|
8076
8219
|
EmailLayout: {
|
|
8077
8220
|
schema: email_layout_props_schema_default,
|
|
8078
|
-
Component: (p) => /* @__PURE__ */
|
|
8221
|
+
Component: (p) => /* @__PURE__ */ React57__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
8079
8222
|
},
|
|
8080
8223
|
Spacer: {
|
|
8081
8224
|
schema: SpacerPropsSchema,
|
|
8082
|
-
Component: (props) => /* @__PURE__ */
|
|
8225
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
8083
8226
|
},
|
|
8084
8227
|
Divider: {
|
|
8085
8228
|
schema: DividerPropsSchema,
|
|
8086
|
-
Component: (props) => /* @__PURE__ */
|
|
8229
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
8087
8230
|
},
|
|
8088
8231
|
Signature: {
|
|
8089
8232
|
schema: SignaturePropsSchema,
|
|
8090
|
-
Component: (props) => /* @__PURE__ */
|
|
8233
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
8091
8234
|
}
|
|
8092
8235
|
});
|
|
8093
8236
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -8095,15 +8238,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
8095
8238
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
8096
8239
|
|
|
8097
8240
|
// src/editor/editor-block.tsx
|
|
8098
|
-
var EditorBlockContext =
|
|
8099
|
-
var useCurrentBlockId = () =>
|
|
8241
|
+
var EditorBlockContext = React57.createContext(null);
|
|
8242
|
+
var useCurrentBlockId = () => React57.useContext(EditorBlockContext);
|
|
8100
8243
|
function EditorBlock({ id }) {
|
|
8101
8244
|
const document2 = useDocument();
|
|
8102
8245
|
const block = document2[id];
|
|
8103
8246
|
if (!block) {
|
|
8104
8247
|
throw new Error("Could not find block");
|
|
8105
8248
|
}
|
|
8106
|
-
return /* @__PURE__ */
|
|
8249
|
+
return /* @__PURE__ */ React57__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React57__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
8107
8250
|
}
|
|
8108
8251
|
function ToggleInspectorPanelButton() {
|
|
8109
8252
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -8111,20 +8254,20 @@ function ToggleInspectorPanelButton() {
|
|
|
8111
8254
|
toggleInspectorDrawerOpen();
|
|
8112
8255
|
};
|
|
8113
8256
|
if (inspectorDrawerOpen) {
|
|
8114
|
-
return /* @__PURE__ */
|
|
8257
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
8115
8258
|
}
|
|
8116
|
-
return /* @__PURE__ */
|
|
8259
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
8117
8260
|
}
|
|
8118
8261
|
function useIcon() {
|
|
8119
8262
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8120
8263
|
if (samplesDrawerOpen) {
|
|
8121
|
-
return /* @__PURE__ */
|
|
8264
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
8122
8265
|
}
|
|
8123
|
-
return /* @__PURE__ */
|
|
8266
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
8124
8267
|
}
|
|
8125
8268
|
function ToggleSamplesPanelButton() {
|
|
8126
8269
|
const icon = useIcon();
|
|
8127
|
-
return /* @__PURE__ */
|
|
8270
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
8128
8271
|
}
|
|
8129
8272
|
function formatHtml(html2, spaces = 2) {
|
|
8130
8273
|
try {
|
|
@@ -8172,8 +8315,8 @@ function json(value) {
|
|
|
8172
8315
|
|
|
8173
8316
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
8174
8317
|
function HighlightedCodePanel({ type, value }) {
|
|
8175
|
-
const [code, setCode] =
|
|
8176
|
-
|
|
8318
|
+
const [code, setCode] = React57.useState(null);
|
|
8319
|
+
React57.useEffect(() => {
|
|
8177
8320
|
switch (type) {
|
|
8178
8321
|
case "html":
|
|
8179
8322
|
html(value).then(setCode);
|
|
@@ -8186,7 +8329,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8186
8329
|
if (code === null) {
|
|
8187
8330
|
return null;
|
|
8188
8331
|
}
|
|
8189
|
-
return /* @__PURE__ */
|
|
8332
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8190
8333
|
"pre",
|
|
8191
8334
|
{
|
|
8192
8335
|
style: {
|
|
@@ -8211,18 +8354,18 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8211
8354
|
// src/app/email-canvas/html-panel.tsx
|
|
8212
8355
|
function HtmlPanel() {
|
|
8213
8356
|
const document2 = useDocument();
|
|
8214
|
-
const code =
|
|
8215
|
-
return /* @__PURE__ */
|
|
8357
|
+
const code = React57.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
8358
|
+
return /* @__PURE__ */ React57__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
8216
8359
|
}
|
|
8217
8360
|
function JsonPanel() {
|
|
8218
8361
|
const document2 = useDocument();
|
|
8219
|
-
const code =
|
|
8220
|
-
return /* @__PURE__ */
|
|
8362
|
+
const code = React57.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
8363
|
+
return /* @__PURE__ */ React57__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
8221
8364
|
}
|
|
8222
8365
|
function TextPanel() {
|
|
8223
8366
|
const document2 = useDocument();
|
|
8224
|
-
const text =
|
|
8225
|
-
return /* @__PURE__ */
|
|
8367
|
+
const text = React57.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
8368
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8226
8369
|
"pre",
|
|
8227
8370
|
{
|
|
8228
8371
|
style: {
|
|
@@ -8258,35 +8401,35 @@ function MainTabsGroup() {
|
|
|
8258
8401
|
setSelectedMainTab("editor");
|
|
8259
8402
|
}
|
|
8260
8403
|
};
|
|
8261
|
-
return /* @__PURE__ */
|
|
8404
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8262
8405
|
material.Tab,
|
|
8263
8406
|
{
|
|
8264
8407
|
value: "editor",
|
|
8265
|
-
label: /* @__PURE__ */
|
|
8408
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
8266
8409
|
}
|
|
8267
|
-
), /* @__PURE__ */
|
|
8410
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8268
8411
|
material.Tab,
|
|
8269
8412
|
{
|
|
8270
8413
|
value: "preview",
|
|
8271
|
-
label: /* @__PURE__ */
|
|
8414
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
8272
8415
|
}
|
|
8273
|
-
), /* @__PURE__ */
|
|
8416
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8274
8417
|
material.Tab,
|
|
8275
8418
|
{
|
|
8276
8419
|
value: "html",
|
|
8277
|
-
label: /* @__PURE__ */
|
|
8420
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
8278
8421
|
}
|
|
8279
|
-
), /* @__PURE__ */
|
|
8422
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8280
8423
|
material.Tab,
|
|
8281
8424
|
{
|
|
8282
8425
|
value: "text",
|
|
8283
|
-
label: /* @__PURE__ */
|
|
8426
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
8284
8427
|
}
|
|
8285
|
-
), /* @__PURE__ */
|
|
8428
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8286
8429
|
material.Tab,
|
|
8287
8430
|
{
|
|
8288
8431
|
value: "json",
|
|
8289
|
-
label: /* @__PURE__ */
|
|
8432
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
8290
8433
|
}
|
|
8291
8434
|
));
|
|
8292
8435
|
}
|
|
@@ -8301,8 +8444,8 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8301
8444
|
} = useEmailEditor();
|
|
8302
8445
|
const { showMessage } = useSnackbar();
|
|
8303
8446
|
const document2 = useDocument();
|
|
8304
|
-
const [dialogMode, setDialogMode] =
|
|
8305
|
-
const [nameError, setNameError] =
|
|
8447
|
+
const [dialogMode, setDialogMode] = React57.useState(null);
|
|
8448
|
+
const [nameError, setNameError] = React57.useState(null);
|
|
8306
8449
|
const hasOpenRow = Boolean(currentTemplateId);
|
|
8307
8450
|
const isSample = currentTemplateKind === "sample";
|
|
8308
8451
|
const primaryLabel = hasOpenRow ? "Save" : "Save as new\u2026";
|
|
@@ -8339,7 +8482,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8339
8482
|
return false;
|
|
8340
8483
|
}
|
|
8341
8484
|
});
|
|
8342
|
-
return /* @__PURE__ */
|
|
8485
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
8343
8486
|
material.Box,
|
|
8344
8487
|
{
|
|
8345
8488
|
sx: {
|
|
@@ -8352,7 +8495,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8352
8495
|
pb: 3
|
|
8353
8496
|
}
|
|
8354
8497
|
},
|
|
8355
|
-
/* @__PURE__ */
|
|
8498
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
8356
8499
|
material.Box,
|
|
8357
8500
|
{
|
|
8358
8501
|
sx: {
|
|
@@ -8367,7 +8510,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8367
8510
|
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
8368
8511
|
}
|
|
8369
8512
|
},
|
|
8370
|
-
hasOpenRow && currentTemplateName && /* @__PURE__ */
|
|
8513
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React57__default.default.createElement(
|
|
8371
8514
|
material.Box,
|
|
8372
8515
|
{
|
|
8373
8516
|
sx: {
|
|
@@ -8383,25 +8526,25 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8383
8526
|
title: currentTemplateName
|
|
8384
8527
|
},
|
|
8385
8528
|
isSample ? "Sample \xB7 " : "",
|
|
8386
|
-
/* @__PURE__ */
|
|
8529
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8387
8530
|
),
|
|
8388
|
-
/* @__PURE__ */
|
|
8531
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: hasOpenRow ? `Save changes${isSample ? " to this sample" : ""}` : "Save as a new template" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8389
8532
|
material.Button,
|
|
8390
8533
|
{
|
|
8391
8534
|
variant: "contained",
|
|
8392
8535
|
size: "large",
|
|
8393
|
-
startIcon: /* @__PURE__ */
|
|
8536
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SaveOutlined, null),
|
|
8394
8537
|
onClick: handlePrimary,
|
|
8395
8538
|
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8396
8539
|
},
|
|
8397
8540
|
primaryLabel
|
|
8398
8541
|
)),
|
|
8399
|
-
hasOpenRow && saveAs && /* @__PURE__ */
|
|
8542
|
+
hasOpenRow && saveAs && /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Save as a new template" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8400
8543
|
material.Button,
|
|
8401
8544
|
{
|
|
8402
8545
|
variant: "outlined",
|
|
8403
8546
|
size: "large",
|
|
8404
|
-
startIcon: /* @__PURE__ */
|
|
8547
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SaveAsOutlined, null),
|
|
8405
8548
|
onClick: () => {
|
|
8406
8549
|
setNameError(null);
|
|
8407
8550
|
setDialogMode("save-as");
|
|
@@ -8410,12 +8553,12 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8410
8553
|
},
|
|
8411
8554
|
"Save as\u2026"
|
|
8412
8555
|
)),
|
|
8413
|
-
saveAs && /* @__PURE__ */
|
|
8556
|
+
saveAs && /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Start a fresh template" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8414
8557
|
material.Button,
|
|
8415
8558
|
{
|
|
8416
8559
|
variant: "text",
|
|
8417
8560
|
size: "large",
|
|
8418
|
-
startIcon: /* @__PURE__ */
|
|
8561
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
8419
8562
|
onClick: () => {
|
|
8420
8563
|
setNameError(null);
|
|
8421
8564
|
setDialogMode("new-blank");
|
|
@@ -8425,7 +8568,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8425
8568
|
"New"
|
|
8426
8569
|
))
|
|
8427
8570
|
)
|
|
8428
|
-
), /* @__PURE__ */
|
|
8571
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8429
8572
|
SaveTemplateDialog,
|
|
8430
8573
|
{
|
|
8431
8574
|
open: dialogMode !== null,
|
|
@@ -8463,7 +8606,7 @@ function SubjectInput() {
|
|
|
8463
8606
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
8464
8607
|
});
|
|
8465
8608
|
};
|
|
8466
|
-
return /* @__PURE__ */
|
|
8609
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8467
8610
|
material.Box,
|
|
8468
8611
|
{
|
|
8469
8612
|
sx: {
|
|
@@ -8480,8 +8623,8 @@ function SubjectInput() {
|
|
|
8480
8623
|
gap: 1.5
|
|
8481
8624
|
}
|
|
8482
8625
|
},
|
|
8483
|
-
/* @__PURE__ */
|
|
8484
|
-
/* @__PURE__ */
|
|
8626
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8627
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
8485
8628
|
material.InputBase,
|
|
8486
8629
|
{
|
|
8487
8630
|
fullWidth: true,
|
|
@@ -8507,7 +8650,7 @@ function SubjectPreview() {
|
|
|
8507
8650
|
if (!subject) return null;
|
|
8508
8651
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
8509
8652
|
const rendered = substituteSampleValues(subject, samples);
|
|
8510
|
-
return /* @__PURE__ */
|
|
8653
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8511
8654
|
material.Box,
|
|
8512
8655
|
{
|
|
8513
8656
|
sx: {
|
|
@@ -8524,8 +8667,8 @@ function SubjectPreview() {
|
|
|
8524
8667
|
gap: 1.5
|
|
8525
8668
|
}
|
|
8526
8669
|
},
|
|
8527
|
-
/* @__PURE__ */
|
|
8528
|
-
/* @__PURE__ */
|
|
8670
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8671
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { fontSize: 14 } }, rendered)
|
|
8529
8672
|
);
|
|
8530
8673
|
}
|
|
8531
8674
|
function generateId3() {
|
|
@@ -8572,12 +8715,12 @@ function findImageFile(items) {
|
|
|
8572
8715
|
}
|
|
8573
8716
|
function ImageDropPasteHandler({ enabled, children }) {
|
|
8574
8717
|
const { uploadImage } = useImageCallbacks();
|
|
8575
|
-
const wrapperRef =
|
|
8576
|
-
const dragDepth =
|
|
8577
|
-
const [dragging, setDragging] =
|
|
8578
|
-
const [uploading, setUploading] =
|
|
8718
|
+
const wrapperRef = React57.useRef(null);
|
|
8719
|
+
const dragDepth = React57.useRef(0);
|
|
8720
|
+
const [dragging, setDragging] = React57.useState(false);
|
|
8721
|
+
const [uploading, setUploading] = React57.useState(false);
|
|
8579
8722
|
const active = enabled && Boolean(uploadImage);
|
|
8580
|
-
|
|
8723
|
+
React57.useEffect(() => {
|
|
8581
8724
|
if (!active || !uploadImage) return;
|
|
8582
8725
|
const handlePaste = (e) => __async(null, null, function* () {
|
|
8583
8726
|
var _a;
|
|
@@ -8598,7 +8741,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8598
8741
|
window.addEventListener("paste", handlePaste);
|
|
8599
8742
|
return () => window.removeEventListener("paste", handlePaste);
|
|
8600
8743
|
}, [active, uploadImage]);
|
|
8601
|
-
if (!active) return /* @__PURE__ */
|
|
8744
|
+
if (!active) return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, children);
|
|
8602
8745
|
const onDragEnter = (e) => {
|
|
8603
8746
|
var _a, _b;
|
|
8604
8747
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -8631,7 +8774,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8631
8774
|
setUploading(false);
|
|
8632
8775
|
}
|
|
8633
8776
|
});
|
|
8634
|
-
return /* @__PURE__ */
|
|
8777
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8635
8778
|
material.Box,
|
|
8636
8779
|
{
|
|
8637
8780
|
ref: wrapperRef,
|
|
@@ -8642,7 +8785,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8642
8785
|
sx: { position: "relative" }
|
|
8643
8786
|
},
|
|
8644
8787
|
children,
|
|
8645
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
8788
|
+
(dragging || uploading) && /* @__PURE__ */ React57__default.default.createElement(
|
|
8646
8789
|
material.Box,
|
|
8647
8790
|
{
|
|
8648
8791
|
sx: {
|
|
@@ -8661,7 +8804,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8661
8804
|
zIndex: 10
|
|
8662
8805
|
}
|
|
8663
8806
|
},
|
|
8664
|
-
/* @__PURE__ */
|
|
8807
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
|
|
8665
8808
|
)
|
|
8666
8809
|
);
|
|
8667
8810
|
}
|
|
@@ -8701,7 +8844,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8701
8844
|
var _a;
|
|
8702
8845
|
switch (selectedMainTab) {
|
|
8703
8846
|
case "editor":
|
|
8704
|
-
return /* @__PURE__ */
|
|
8847
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React57__default.default.createElement(EditorBlock, { id: "root" }));
|
|
8705
8848
|
case "preview": {
|
|
8706
8849
|
const rootBlock = document2.root;
|
|
8707
8850
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -8709,18 +8852,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8709
8852
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
8710
8853
|
);
|
|
8711
8854
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
8712
|
-
return /* @__PURE__ */
|
|
8855
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React57__default.default.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
8713
8856
|
}
|
|
8714
8857
|
case "html":
|
|
8715
|
-
return /* @__PURE__ */
|
|
8858
|
+
return /* @__PURE__ */ React57__default.default.createElement(HtmlPanel, null);
|
|
8716
8859
|
case "text":
|
|
8717
|
-
return /* @__PURE__ */
|
|
8860
|
+
return /* @__PURE__ */ React57__default.default.createElement(TextPanel, null);
|
|
8718
8861
|
case "json":
|
|
8719
|
-
return /* @__PURE__ */
|
|
8862
|
+
return /* @__PURE__ */ React57__default.default.createElement(JsonPanel, null);
|
|
8720
8863
|
}
|
|
8721
8864
|
};
|
|
8722
8865
|
const showSaveButtons = persistenceEnabled;
|
|
8723
|
-
return /* @__PURE__ */
|
|
8866
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
8724
8867
|
material.Stack,
|
|
8725
8868
|
{
|
|
8726
8869
|
sx: {
|
|
@@ -8737,10 +8880,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8737
8880
|
justifyContent: "space-between",
|
|
8738
8881
|
alignItems: "center"
|
|
8739
8882
|
},
|
|
8740
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
8741
|
-
/* @__PURE__ */
|
|
8742
|
-
/* @__PURE__ */
|
|
8743
|
-
), selectedMainTab === "editor" && /* @__PURE__ */
|
|
8883
|
+
samplesDrawerEnabled && /* @__PURE__ */ React57__default.default.createElement(ToggleSamplesPanelButton, null),
|
|
8884
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))))),
|
|
8885
|
+
/* @__PURE__ */ React57__default.default.createElement(ToggleInspectorPanelButton, null)
|
|
8886
|
+
), selectedMainTab === "editor" && /* @__PURE__ */ React57__default.default.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React57__default.default.createElement(SubjectPreview, null), /* @__PURE__ */ React57__default.default.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8744
8887
|
material.Box,
|
|
8745
8888
|
{
|
|
8746
8889
|
sx: {
|
|
@@ -8756,8 +8899,8 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8756
8899
|
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
8757
8900
|
}
|
|
8758
8901
|
},
|
|
8759
|
-
/* @__PURE__ */
|
|
8760
|
-
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */
|
|
8902
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
|
|
8903
|
+
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React57__default.default.createElement(SaveBar, { loadTemplates, saveAs })
|
|
8761
8904
|
)));
|
|
8762
8905
|
}
|
|
8763
8906
|
|
|
@@ -8794,7 +8937,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
8794
8937
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
8795
8938
|
});
|
|
8796
8939
|
}
|
|
8797
|
-
var EmailEditorInternal =
|
|
8940
|
+
var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
8798
8941
|
const {
|
|
8799
8942
|
drawerEnterDuration = 225,
|
|
8800
8943
|
drawerExitDuration = 225,
|
|
@@ -8816,10 +8959,10 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8816
8959
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8817
8960
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
8818
8961
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
8819
|
-
const onChangeRef =
|
|
8962
|
+
const onChangeRef = React57.useRef(onChange);
|
|
8820
8963
|
onChangeRef.current = onChange;
|
|
8821
|
-
const prevDocJsonRef =
|
|
8822
|
-
|
|
8964
|
+
const prevDocJsonRef = React57.useRef("");
|
|
8965
|
+
React57.useEffect(() => {
|
|
8823
8966
|
var _a;
|
|
8824
8967
|
const docJson = JSON.stringify(currentDocument);
|
|
8825
8968
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -8827,7 +8970,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8827
8970
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
8828
8971
|
}
|
|
8829
8972
|
}, [currentDocument]);
|
|
8830
|
-
|
|
8973
|
+
React57.useImperativeHandle(ref, () => ({
|
|
8831
8974
|
saveTemplate: () => {
|
|
8832
8975
|
return saveTemplate();
|
|
8833
8976
|
},
|
|
@@ -8839,15 +8982,16 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8839
8982
|
return getDocument();
|
|
8840
8983
|
}
|
|
8841
8984
|
}));
|
|
8842
|
-
return /* @__PURE__ */
|
|
8985
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8843
8986
|
InspectorDrawer,
|
|
8844
8987
|
{
|
|
8845
8988
|
enterDuration: drawerEnterDuration,
|
|
8846
8989
|
exitDuration: drawerExitDuration,
|
|
8847
8990
|
deleteTemplate,
|
|
8848
|
-
copyTemplate
|
|
8991
|
+
copyTemplate,
|
|
8992
|
+
renameTemplate
|
|
8849
8993
|
}
|
|
8850
|
-
), /* @__PURE__ */
|
|
8994
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8851
8995
|
SamplesDrawer,
|
|
8852
8996
|
{
|
|
8853
8997
|
enterDuration: drawerEnterDuration,
|
|
@@ -8863,7 +9007,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8863
9007
|
setTemplateKind,
|
|
8864
9008
|
saveAs
|
|
8865
9009
|
}
|
|
8866
|
-
), /* @__PURE__ */
|
|
9010
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8867
9011
|
material.Stack,
|
|
8868
9012
|
{
|
|
8869
9013
|
sx: {
|
|
@@ -8872,10 +9016,10 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8872
9016
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
8873
9017
|
}
|
|
8874
9018
|
},
|
|
8875
|
-
/* @__PURE__ */
|
|
9019
|
+
/* @__PURE__ */ React57__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
8876
9020
|
));
|
|
8877
9021
|
});
|
|
8878
|
-
var EmailEditor =
|
|
9022
|
+
var EmailEditor = React57.forwardRef((props, ref) => {
|
|
8879
9023
|
const {
|
|
8880
9024
|
initialTemplate: initialTemplateProp,
|
|
8881
9025
|
initialTemplateId,
|
|
@@ -8900,23 +9044,23 @@ var EmailEditor = React62.forwardRef((props, ref) => {
|
|
|
8900
9044
|
deleteImage,
|
|
8901
9045
|
theme
|
|
8902
9046
|
} = props;
|
|
8903
|
-
const resolvedTemplate =
|
|
9047
|
+
const resolvedTemplate = React57.useMemo(
|
|
8904
9048
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
8905
9049
|
[initialTemplateProp]
|
|
8906
9050
|
);
|
|
8907
|
-
const prevTemplateRef =
|
|
9051
|
+
const prevTemplateRef = React57.useRef(void 0);
|
|
8908
9052
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
8909
9053
|
prevTemplateRef.current = resolvedTemplate;
|
|
8910
9054
|
resetDocument(resolvedTemplate);
|
|
8911
9055
|
}
|
|
8912
|
-
|
|
9056
|
+
React57.useEffect(() => {
|
|
8913
9057
|
setPersistenceEnabled(persistenceEnabled);
|
|
8914
9058
|
}, [persistenceEnabled]);
|
|
8915
|
-
const imageCallbacks =
|
|
9059
|
+
const imageCallbacks = React57.useMemo(
|
|
8916
9060
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
8917
9061
|
[uploadImage, loadImages, deleteImage]
|
|
8918
9062
|
);
|
|
8919
|
-
return /* @__PURE__ */
|
|
9063
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React57__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React57__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React57__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React57__default.default.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8920
9064
|
EmailEditorProvider,
|
|
8921
9065
|
{
|
|
8922
9066
|
initialTemplate: resolvedTemplate,
|
|
@@ -8925,7 +9069,7 @@ var EmailEditor = React62.forwardRef((props, ref) => {
|
|
|
8925
9069
|
onSave,
|
|
8926
9070
|
onChange
|
|
8927
9071
|
},
|
|
8928
|
-
/* @__PURE__ */
|
|
9072
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
8929
9073
|
EmailEditorInternal,
|
|
8930
9074
|
{
|
|
8931
9075
|
ref,
|