@kontakto/email-template-editor 2.3.0 → 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 +883 -728
- 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 +690 -535
- 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) => {
|
|
@@ -5698,11 +5842,20 @@ function SamplesDrawer({
|
|
|
5698
5842
|
setLoadingTemplates(false);
|
|
5699
5843
|
}
|
|
5700
5844
|
});
|
|
5701
|
-
|
|
5845
|
+
const ensureRowPresent = (id, slug, kind, tags) => {
|
|
5846
|
+
const now = (/* @__PURE__ */ new Date()).toISOString();
|
|
5847
|
+
const row = { id, slug, kind, tags, createdAt: now, updatedAt: now };
|
|
5848
|
+
if (kind === "sample") {
|
|
5849
|
+
setSamples((prev) => prev.some((t) => t.id === id) ? prev : [...prev, row]);
|
|
5850
|
+
} else {
|
|
5851
|
+
setTemplates((prev) => prev.some((t) => t.id === id) ? prev : [...prev, row]);
|
|
5852
|
+
}
|
|
5853
|
+
};
|
|
5854
|
+
React57.useEffect(() => {
|
|
5702
5855
|
if (!enabled || !loadTemplates) return;
|
|
5703
5856
|
refreshTemplates();
|
|
5704
5857
|
}, [enabled, loadTemplates]);
|
|
5705
|
-
|
|
5858
|
+
React57.useEffect(() => {
|
|
5706
5859
|
const handler = (e) => {
|
|
5707
5860
|
const detail = e.detail;
|
|
5708
5861
|
if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
|
|
@@ -5710,7 +5863,7 @@ function SamplesDrawer({
|
|
|
5710
5863
|
window.addEventListener("templateListUpdated", handler);
|
|
5711
5864
|
return () => window.removeEventListener("templateListUpdated", handler);
|
|
5712
5865
|
}, []);
|
|
5713
|
-
const { templateRows, sampleRows } =
|
|
5866
|
+
const { templateRows, sampleRows } = React57.useMemo(() => {
|
|
5714
5867
|
const byId = /* @__PURE__ */ new Map();
|
|
5715
5868
|
for (const s of samples) byId.set(s.id, s);
|
|
5716
5869
|
for (const t of templates) byId.set(t.id, t);
|
|
@@ -5720,14 +5873,14 @@ function SamplesDrawer({
|
|
|
5720
5873
|
sampleRows: all.filter((t) => t.kind === "sample")
|
|
5721
5874
|
};
|
|
5722
5875
|
}, [samples, templates]);
|
|
5723
|
-
const allTags =
|
|
5876
|
+
const allTags = React57.useMemo(() => {
|
|
5724
5877
|
var _a2, _b2;
|
|
5725
5878
|
const set = /* @__PURE__ */ new Set();
|
|
5726
5879
|
for (const t of templateRows) (_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
5727
5880
|
for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
|
|
5728
5881
|
return Array.from(set).sort();
|
|
5729
5882
|
}, [templateRows, sampleRows]);
|
|
5730
|
-
const matchesSearchAndTags =
|
|
5883
|
+
const matchesSearchAndTags = React57.useMemo(() => {
|
|
5731
5884
|
const term = search.trim().toLowerCase();
|
|
5732
5885
|
return (t) => {
|
|
5733
5886
|
if (term) {
|
|
@@ -5741,11 +5894,11 @@ function SamplesDrawer({
|
|
|
5741
5894
|
return true;
|
|
5742
5895
|
};
|
|
5743
5896
|
}, [search, activeTags]);
|
|
5744
|
-
const filteredTemplates =
|
|
5897
|
+
const filteredTemplates = React57.useMemo(
|
|
5745
5898
|
() => templateRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
5746
5899
|
[templateRows, matchesSearchAndTags, sortKey]
|
|
5747
5900
|
);
|
|
5748
|
-
const filteredSamples =
|
|
5901
|
+
const filteredSamples = React57.useMemo(
|
|
5749
5902
|
() => sampleRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
5750
5903
|
[sampleRows, matchesSearchAndTags, sortKey]
|
|
5751
5904
|
);
|
|
@@ -5776,16 +5929,15 @@ function SamplesDrawer({
|
|
|
5776
5929
|
showMessage("Template deleted");
|
|
5777
5930
|
};
|
|
5778
5931
|
const handleRenameSubmit = (newSlug, opts) => __async(null, null, function* () {
|
|
5932
|
+
var _a2, _b2;
|
|
5779
5933
|
if (!renameTarget || !renameTemplate) return;
|
|
5780
5934
|
yield renameTemplate(renameTarget.id, newSlug, opts);
|
|
5781
|
-
const
|
|
5782
|
-
|
|
5783
|
-
return t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : t.tags }) : t;
|
|
5784
|
-
};
|
|
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;
|
|
5785
5937
|
setTemplates((prev) => prev.map(patch));
|
|
5786
5938
|
setSamples((prev) => prev.map(patch));
|
|
5787
5939
|
if (currentTemplateId === renameTarget.id) {
|
|
5788
|
-
setCurrentTemplate(renameTarget.id, newSlug);
|
|
5940
|
+
setCurrentTemplate(renameTarget.id, newSlug, void 0, newTags);
|
|
5789
5941
|
}
|
|
5790
5942
|
showMessage("Details saved");
|
|
5791
5943
|
});
|
|
@@ -5842,6 +5994,7 @@ function SamplesDrawer({
|
|
|
5842
5994
|
showMessage("New template created!");
|
|
5843
5995
|
window.location.hash = `#template/${id}`;
|
|
5844
5996
|
yield refreshTemplates();
|
|
5997
|
+
ensureRowPresent(id, slug, "template");
|
|
5845
5998
|
return true;
|
|
5846
5999
|
} catch (e) {
|
|
5847
6000
|
console.error("Error creating template:", e);
|
|
@@ -5879,6 +6032,7 @@ function SamplesDrawer({
|
|
|
5879
6032
|
showMessage(kind === "sample" ? "New sample created" : "New template created");
|
|
5880
6033
|
window.location.hash = `#template/${id}`;
|
|
5881
6034
|
yield refreshTemplates();
|
|
6035
|
+
ensureRowPresent(id, slug, kind);
|
|
5882
6036
|
return true;
|
|
5883
6037
|
} catch (e) {
|
|
5884
6038
|
console.error("Error creating:", e);
|
|
@@ -5890,7 +6044,7 @@ function SamplesDrawer({
|
|
|
5890
6044
|
return null;
|
|
5891
6045
|
}
|
|
5892
6046
|
const existingSlugs = templates.map((t) => t.slug);
|
|
5893
|
-
return /* @__PURE__ */
|
|
6047
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
5894
6048
|
material.Drawer,
|
|
5895
6049
|
{
|
|
5896
6050
|
variant: "persistent",
|
|
@@ -5905,7 +6059,7 @@ function SamplesDrawer({
|
|
|
5905
6059
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
5906
6060
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
5907
6061
|
},
|
|
5908
|
-
/* @__PURE__ */
|
|
6062
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5909
6063
|
material.Stack,
|
|
5910
6064
|
{
|
|
5911
6065
|
py: 1,
|
|
@@ -5915,16 +6069,16 @@ function SamplesDrawer({
|
|
|
5915
6069
|
spacing: 1.5,
|
|
5916
6070
|
sx: { overflowY: "auto" }
|
|
5917
6071
|
},
|
|
5918
|
-
/* @__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(
|
|
5919
6073
|
material.IconButton,
|
|
5920
6074
|
{
|
|
5921
6075
|
size: "small",
|
|
5922
6076
|
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
5923
6077
|
"aria-label": activeLeftTab === "samples" ? "New sample" : "New template"
|
|
5924
6078
|
},
|
|
5925
|
-
/* @__PURE__ */
|
|
6079
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
5926
6080
|
))),
|
|
5927
|
-
/* @__PURE__ */
|
|
6081
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
5928
6082
|
material.Tabs,
|
|
5929
6083
|
{
|
|
5930
6084
|
value: activeLeftTab,
|
|
@@ -5932,11 +6086,11 @@ function SamplesDrawer({
|
|
|
5932
6086
|
variant: "fullWidth",
|
|
5933
6087
|
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
5934
6088
|
},
|
|
5935
|
-
/* @__PURE__ */
|
|
5936
|
-
/* @__PURE__ */
|
|
5937
|
-
/* @__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" })
|
|
5938
6092
|
),
|
|
5939
|
-
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(
|
|
5940
6094
|
material.TextField,
|
|
5941
6095
|
{
|
|
5942
6096
|
size: "small",
|
|
@@ -5944,10 +6098,10 @@ function SamplesDrawer({
|
|
|
5944
6098
|
value: search,
|
|
5945
6099
|
onChange: (e) => setSearch(e.target.value),
|
|
5946
6100
|
InputProps: {
|
|
5947
|
-
startAdornment: /* @__PURE__ */
|
|
6101
|
+
startAdornment: /* @__PURE__ */ React57__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
5948
6102
|
}
|
|
5949
6103
|
}
|
|
5950
|
-
), /* @__PURE__ */
|
|
6104
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
5951
6105
|
material.TextField,
|
|
5952
6106
|
{
|
|
5953
6107
|
select: true,
|
|
@@ -5956,8 +6110,8 @@ function SamplesDrawer({
|
|
|
5956
6110
|
value: sortKey,
|
|
5957
6111
|
onChange: (e) => setSortKey(e.target.value)
|
|
5958
6112
|
},
|
|
5959
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
5960
|
-
), 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(
|
|
5961
6115
|
material.Chip,
|
|
5962
6116
|
{
|
|
5963
6117
|
label: "All",
|
|
@@ -5967,7 +6121,7 @@ function SamplesDrawer({
|
|
|
5967
6121
|
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
5968
6122
|
onClick: () => setActiveTags([])
|
|
5969
6123
|
}
|
|
5970
|
-
), allTags.map((tag) => /* @__PURE__ */
|
|
6124
|
+
), allTags.map((tag) => /* @__PURE__ */ React57__default.default.createElement(
|
|
5971
6125
|
material.Chip,
|
|
5972
6126
|
{
|
|
5973
6127
|
key: tag,
|
|
@@ -5978,7 +6132,7 @@ function SamplesDrawer({
|
|
|
5978
6132
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
5979
6133
|
onClick: () => toggleTag(tag)
|
|
5980
6134
|
}
|
|
5981
|
-
))), 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(
|
|
5982
6136
|
TemplateRow,
|
|
5983
6137
|
{
|
|
5984
6138
|
key: template.id,
|
|
@@ -5990,7 +6144,7 @@ function SamplesDrawer({
|
|
|
5990
6144
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
5991
6145
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
5992
6146
|
}
|
|
5993
|
-
))) : /* @__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(
|
|
5994
6148
|
TemplateRow,
|
|
5995
6149
|
{
|
|
5996
6150
|
key: sample.id,
|
|
@@ -6002,9 +6156,9 @@ function SamplesDrawer({
|
|
|
6002
6156
|
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
6003
6157
|
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
6004
6158
|
}
|
|
6005
|
-
))) : /* @__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")))
|
|
6006
6160
|
)
|
|
6007
|
-
), renameTarget && /* @__PURE__ */
|
|
6161
|
+
), renameTarget && /* @__PURE__ */ React57__default.default.createElement(
|
|
6008
6162
|
RenameDialog,
|
|
6009
6163
|
{
|
|
6010
6164
|
open: !!renameTarget,
|
|
@@ -6014,7 +6168,7 @@ function SamplesDrawer({
|
|
|
6014
6168
|
onClose: () => setRenameTarget(null),
|
|
6015
6169
|
onSubmit: handleRenameSubmit
|
|
6016
6170
|
}
|
|
6017
|
-
), /* @__PURE__ */
|
|
6171
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
6018
6172
|
SaveTemplateDialog,
|
|
6019
6173
|
{
|
|
6020
6174
|
open: !!pendingSaveAs,
|
|
@@ -6027,7 +6181,7 @@ function SamplesDrawer({
|
|
|
6027
6181
|
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
6028
6182
|
error: newError
|
|
6029
6183
|
}
|
|
6030
|
-
), /* @__PURE__ */
|
|
6184
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
6031
6185
|
NewTemplatePickerDialog,
|
|
6032
6186
|
{
|
|
6033
6187
|
open: pickerKind !== null,
|
|
@@ -6051,7 +6205,7 @@ var ICON_SX = {
|
|
|
6051
6205
|
borderColor: "cadet.300"
|
|
6052
6206
|
};
|
|
6053
6207
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
6054
|
-
return /* @__PURE__ */
|
|
6208
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6055
6209
|
material.Button,
|
|
6056
6210
|
{
|
|
6057
6211
|
sx: BUTTON_SX2,
|
|
@@ -6060,14 +6214,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
6060
6214
|
onClick();
|
|
6061
6215
|
}
|
|
6062
6216
|
},
|
|
6063
|
-
/* @__PURE__ */
|
|
6064
|
-
/* @__PURE__ */
|
|
6217
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
6218
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
6065
6219
|
);
|
|
6066
6220
|
}
|
|
6067
6221
|
var BUTTONS = [
|
|
6068
6222
|
{
|
|
6069
6223
|
label: "Heading",
|
|
6070
|
-
icon: /* @__PURE__ */
|
|
6224
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
6071
6225
|
block: () => ({
|
|
6072
6226
|
type: "Heading",
|
|
6073
6227
|
data: {
|
|
@@ -6080,7 +6234,7 @@ var BUTTONS = [
|
|
|
6080
6234
|
},
|
|
6081
6235
|
{
|
|
6082
6236
|
label: "Text",
|
|
6083
|
-
icon: /* @__PURE__ */
|
|
6237
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
6084
6238
|
block: () => ({
|
|
6085
6239
|
type: "Text",
|
|
6086
6240
|
data: {
|
|
@@ -6094,7 +6248,7 @@ var BUTTONS = [
|
|
|
6094
6248
|
},
|
|
6095
6249
|
{
|
|
6096
6250
|
label: "Button",
|
|
6097
|
-
icon: /* @__PURE__ */
|
|
6251
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
6098
6252
|
block: () => ({
|
|
6099
6253
|
type: "Button",
|
|
6100
6254
|
data: {
|
|
@@ -6108,7 +6262,7 @@ var BUTTONS = [
|
|
|
6108
6262
|
},
|
|
6109
6263
|
{
|
|
6110
6264
|
label: "Image",
|
|
6111
|
-
icon: /* @__PURE__ */
|
|
6265
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
6112
6266
|
block: () => ({
|
|
6113
6267
|
type: "Image",
|
|
6114
6268
|
data: {
|
|
@@ -6124,7 +6278,7 @@ var BUTTONS = [
|
|
|
6124
6278
|
},
|
|
6125
6279
|
{
|
|
6126
6280
|
label: "Avatar",
|
|
6127
|
-
icon: /* @__PURE__ */
|
|
6281
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
6128
6282
|
block: () => ({
|
|
6129
6283
|
type: "Avatar",
|
|
6130
6284
|
data: {
|
|
@@ -6138,7 +6292,7 @@ var BUTTONS = [
|
|
|
6138
6292
|
},
|
|
6139
6293
|
{
|
|
6140
6294
|
label: "Personal Signature",
|
|
6141
|
-
icon: /* @__PURE__ */
|
|
6295
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
|
|
6142
6296
|
block: () => ({
|
|
6143
6297
|
type: "Signature",
|
|
6144
6298
|
data: {
|
|
@@ -6160,7 +6314,7 @@ var BUTTONS = [
|
|
|
6160
6314
|
},
|
|
6161
6315
|
{
|
|
6162
6316
|
label: "Company Signature",
|
|
6163
|
-
icon: /* @__PURE__ */
|
|
6317
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.BusinessOutlined, null),
|
|
6164
6318
|
block: () => ({
|
|
6165
6319
|
type: "Signature",
|
|
6166
6320
|
data: {
|
|
@@ -6180,7 +6334,7 @@ var BUTTONS = [
|
|
|
6180
6334
|
},
|
|
6181
6335
|
{
|
|
6182
6336
|
label: "Divider",
|
|
6183
|
-
icon: /* @__PURE__ */
|
|
6337
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
6184
6338
|
block: () => ({
|
|
6185
6339
|
type: "Divider",
|
|
6186
6340
|
data: {
|
|
@@ -6193,7 +6347,7 @@ var BUTTONS = [
|
|
|
6193
6347
|
},
|
|
6194
6348
|
{
|
|
6195
6349
|
label: "Spacer",
|
|
6196
|
-
icon: /* @__PURE__ */
|
|
6350
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
6197
6351
|
block: () => ({
|
|
6198
6352
|
type: "Spacer",
|
|
6199
6353
|
data: {}
|
|
@@ -6201,7 +6355,7 @@ var BUTTONS = [
|
|
|
6201
6355
|
},
|
|
6202
6356
|
{
|
|
6203
6357
|
label: "Html",
|
|
6204
|
-
icon: /* @__PURE__ */
|
|
6358
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
6205
6359
|
block: () => ({
|
|
6206
6360
|
type: "Html",
|
|
6207
6361
|
data: {
|
|
@@ -6216,7 +6370,7 @@ var BUTTONS = [
|
|
|
6216
6370
|
},
|
|
6217
6371
|
{
|
|
6218
6372
|
label: "Columns",
|
|
6219
|
-
icon: /* @__PURE__ */
|
|
6373
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
6220
6374
|
block: () => ({
|
|
6221
6375
|
type: "ColumnsContainer",
|
|
6222
6376
|
data: {
|
|
@@ -6231,7 +6385,7 @@ var BUTTONS = [
|
|
|
6231
6385
|
},
|
|
6232
6386
|
{
|
|
6233
6387
|
label: "Container",
|
|
6234
|
-
icon: /* @__PURE__ */
|
|
6388
|
+
icon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
6235
6389
|
block: () => ({
|
|
6236
6390
|
type: "Container",
|
|
6237
6391
|
data: {
|
|
@@ -6255,7 +6409,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6255
6409
|
if (anchorEl === null) {
|
|
6256
6410
|
return null;
|
|
6257
6411
|
}
|
|
6258
|
-
return /* @__PURE__ */
|
|
6412
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6259
6413
|
material.Menu,
|
|
6260
6414
|
{
|
|
6261
6415
|
open: true,
|
|
@@ -6264,12 +6418,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6264
6418
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
6265
6419
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
6266
6420
|
},
|
|
6267
|
-
/* @__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()) })))
|
|
6268
6422
|
);
|
|
6269
6423
|
}
|
|
6270
6424
|
function DividerButton({ buttonElement, onClick }) {
|
|
6271
|
-
const [visible, setVisible] =
|
|
6272
|
-
|
|
6425
|
+
const [visible, setVisible] = React57.useState(false);
|
|
6426
|
+
React57.useEffect(() => {
|
|
6273
6427
|
function listener({ clientX, clientY }) {
|
|
6274
6428
|
if (!buttonElement) {
|
|
6275
6429
|
return;
|
|
@@ -6291,7 +6445,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6291
6445
|
window.removeEventListener("mousemove", listener);
|
|
6292
6446
|
};
|
|
6293
6447
|
}, [buttonElement, setVisible]);
|
|
6294
|
-
return /* @__PURE__ */
|
|
6448
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React57__default.default.createElement(
|
|
6295
6449
|
material.IconButton,
|
|
6296
6450
|
{
|
|
6297
6451
|
size: "small",
|
|
@@ -6314,11 +6468,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6314
6468
|
onClick();
|
|
6315
6469
|
}
|
|
6316
6470
|
},
|
|
6317
|
-
/* @__PURE__ */
|
|
6471
|
+
/* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6318
6472
|
));
|
|
6319
6473
|
}
|
|
6320
6474
|
function PlaceholderButton({ onClick }) {
|
|
6321
|
-
return /* @__PURE__ */
|
|
6475
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6322
6476
|
material.ButtonBase,
|
|
6323
6477
|
{
|
|
6324
6478
|
onClick: (ev) => {
|
|
@@ -6334,7 +6488,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
6334
6488
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
6335
6489
|
}
|
|
6336
6490
|
},
|
|
6337
|
-
/* @__PURE__ */
|
|
6491
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6338
6492
|
iconsMaterial.AddOutlined,
|
|
6339
6493
|
{
|
|
6340
6494
|
sx: {
|
|
@@ -6351,29 +6505,29 @@ function PlaceholderButton({ onClick }) {
|
|
|
6351
6505
|
|
|
6352
6506
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
6353
6507
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
6354
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
6355
|
-
const [buttonElement, setButtonElement] =
|
|
6508
|
+
const [menuAnchorEl, setMenuAnchorEl] = React57.useState(null);
|
|
6509
|
+
const [buttonElement, setButtonElement] = React57.useState(null);
|
|
6356
6510
|
const handleButtonClick = () => {
|
|
6357
6511
|
setMenuAnchorEl(buttonElement);
|
|
6358
6512
|
};
|
|
6359
6513
|
const renderButton2 = () => {
|
|
6360
6514
|
if (placeholder) {
|
|
6361
|
-
return /* @__PURE__ */
|
|
6515
|
+
return /* @__PURE__ */ React57__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
6362
6516
|
} else {
|
|
6363
|
-
return /* @__PURE__ */
|
|
6517
|
+
return /* @__PURE__ */ React57__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
6364
6518
|
}
|
|
6365
6519
|
};
|
|
6366
|
-
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 }));
|
|
6367
6521
|
}
|
|
6368
|
-
var BlockParentContext =
|
|
6522
|
+
var BlockParentContext = React57.createContext(null);
|
|
6369
6523
|
function BlockParentProvider({
|
|
6370
6524
|
info,
|
|
6371
6525
|
children
|
|
6372
6526
|
}) {
|
|
6373
|
-
return /* @__PURE__ */
|
|
6527
|
+
return /* @__PURE__ */ React57__default.default.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6374
6528
|
}
|
|
6375
6529
|
function useBlockParent() {
|
|
6376
|
-
return
|
|
6530
|
+
return React57.useContext(BlockParentContext);
|
|
6377
6531
|
}
|
|
6378
6532
|
|
|
6379
6533
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -6400,9 +6554,9 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6400
6554
|
});
|
|
6401
6555
|
};
|
|
6402
6556
|
if (!childrenIds || childrenIds.length === 0) {
|
|
6403
|
-
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 }));
|
|
6404
6558
|
}
|
|
6405
|
-
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 }));
|
|
6406
6560
|
}
|
|
6407
6561
|
function CanvasDropZone({
|
|
6408
6562
|
parentRef,
|
|
@@ -6411,7 +6565,7 @@ function CanvasDropZone({
|
|
|
6411
6565
|
}) {
|
|
6412
6566
|
const document2 = useDocument();
|
|
6413
6567
|
const dragging = useDraggingBlock();
|
|
6414
|
-
const [over, setOver] =
|
|
6568
|
+
const [over, setOver] = React57.useState(false);
|
|
6415
6569
|
if (!dragging) return null;
|
|
6416
6570
|
if (isDescendant(document2, dragging.sourceId, parentRef.parentId)) return null;
|
|
6417
6571
|
const handleDragOver = (e) => {
|
|
@@ -6439,7 +6593,7 @@ function CanvasDropZone({
|
|
|
6439
6593
|
}
|
|
6440
6594
|
setDraggingBlock(null);
|
|
6441
6595
|
};
|
|
6442
|
-
return /* @__PURE__ */
|
|
6596
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6443
6597
|
material.Box,
|
|
6444
6598
|
{
|
|
6445
6599
|
onDragOver: handleDragOver,
|
|
@@ -6482,13 +6636,13 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6482
6636
|
});
|
|
6483
6637
|
setSelectedBlockId(blockId);
|
|
6484
6638
|
};
|
|
6485
|
-
return /* @__PURE__ */
|
|
6639
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6486
6640
|
columns_container_default,
|
|
6487
6641
|
{
|
|
6488
6642
|
props: restProps,
|
|
6489
6643
|
style,
|
|
6490
6644
|
columns: [
|
|
6491
|
-
/* @__PURE__ */
|
|
6645
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6492
6646
|
EditorChildrenIds,
|
|
6493
6647
|
{
|
|
6494
6648
|
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
@@ -6496,7 +6650,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6496
6650
|
onChange: (change) => updateColumn(0, change)
|
|
6497
6651
|
}
|
|
6498
6652
|
),
|
|
6499
|
-
/* @__PURE__ */
|
|
6653
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6500
6654
|
EditorChildrenIds,
|
|
6501
6655
|
{
|
|
6502
6656
|
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
@@ -6504,7 +6658,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6504
6658
|
onChange: (change) => updateColumn(1, change)
|
|
6505
6659
|
}
|
|
6506
6660
|
),
|
|
6507
|
-
/* @__PURE__ */
|
|
6661
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6508
6662
|
EditorChildrenIds,
|
|
6509
6663
|
{
|
|
6510
6664
|
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
@@ -6521,7 +6675,7 @@ function ContainerEditor({ style, props }) {
|
|
|
6521
6675
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
6522
6676
|
const document2 = useDocument();
|
|
6523
6677
|
const currentBlockId = useCurrentBlockId();
|
|
6524
|
-
return /* @__PURE__ */
|
|
6678
|
+
return /* @__PURE__ */ React57__default.default.createElement(container_default, { style }, /* @__PURE__ */ React57__default.default.createElement(
|
|
6525
6679
|
EditorChildrenIds,
|
|
6526
6680
|
{
|
|
6527
6681
|
childrenIds,
|
|
@@ -6628,7 +6782,7 @@ function EmailLayoutEditor(props) {
|
|
|
6628
6782
|
const document2 = useDocument();
|
|
6629
6783
|
const currentBlockId = useCurrentBlockId();
|
|
6630
6784
|
const selectedBlockId = useSelectedBlockId();
|
|
6631
|
-
const handleDelete =
|
|
6785
|
+
const handleDelete = React57.useCallback((e) => {
|
|
6632
6786
|
var _a2, _b2, _c2;
|
|
6633
6787
|
if (e.key !== "Delete" && e.key !== "Backspace") return;
|
|
6634
6788
|
if (!selectedBlockId) return;
|
|
@@ -6659,7 +6813,7 @@ function EmailLayoutEditor(props) {
|
|
|
6659
6813
|
delete nDocument[selectedBlockId];
|
|
6660
6814
|
resetDocument(nDocument);
|
|
6661
6815
|
}, [selectedBlockId, document2]);
|
|
6662
|
-
const handleCopy =
|
|
6816
|
+
const handleCopy = React57.useCallback((e) => {
|
|
6663
6817
|
if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
|
|
6664
6818
|
if (!selectedBlockId) return;
|
|
6665
6819
|
const target = e.target;
|
|
@@ -6672,7 +6826,7 @@ function EmailLayoutEditor(props) {
|
|
|
6672
6826
|
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
|
|
6673
6827
|
navigator.clipboard.writeText(payload);
|
|
6674
6828
|
}, [selectedBlockId, document2]);
|
|
6675
|
-
const handlePaste =
|
|
6829
|
+
const handlePaste = React57.useCallback((e) => __async(null, null, function* () {
|
|
6676
6830
|
var _a2;
|
|
6677
6831
|
const target = e.target;
|
|
6678
6832
|
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
@@ -6703,7 +6857,7 @@ function EmailLayoutEditor(props) {
|
|
|
6703
6857
|
resetDocument(doc);
|
|
6704
6858
|
setSelectedBlockId(newRootId);
|
|
6705
6859
|
}), [document2, childrenIds, selectedBlockId, currentBlockId]);
|
|
6706
|
-
|
|
6860
|
+
React57.useEffect(() => {
|
|
6707
6861
|
window.addEventListener("keydown", handleDelete);
|
|
6708
6862
|
window.addEventListener("keydown", handleCopy);
|
|
6709
6863
|
window.addEventListener("paste", handlePaste);
|
|
@@ -6722,7 +6876,7 @@ function EmailLayoutEditor(props) {
|
|
|
6722
6876
|
lineHeight: "1.5",
|
|
6723
6877
|
margin: "0"
|
|
6724
6878
|
};
|
|
6725
|
-
const editorChildren = /* @__PURE__ */
|
|
6879
|
+
const editorChildren = /* @__PURE__ */ React57__default.default.createElement(
|
|
6726
6880
|
EditorChildrenIds,
|
|
6727
6881
|
{
|
|
6728
6882
|
childrenIds,
|
|
@@ -6750,7 +6904,7 @@ function EmailLayoutEditor(props) {
|
|
|
6750
6904
|
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
6751
6905
|
};
|
|
6752
6906
|
if (props.backdropDisabled) {
|
|
6753
|
-
return /* @__PURE__ */
|
|
6907
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6754
6908
|
"div",
|
|
6755
6909
|
{
|
|
6756
6910
|
onClick: () => {
|
|
@@ -6763,7 +6917,7 @@ function EmailLayoutEditor(props) {
|
|
|
6763
6917
|
minHeight: "100%"
|
|
6764
6918
|
})
|
|
6765
6919
|
},
|
|
6766
|
-
/* @__PURE__ */
|
|
6920
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6767
6921
|
"div",
|
|
6768
6922
|
{
|
|
6769
6923
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6771,11 +6925,11 @@ function EmailLayoutEditor(props) {
|
|
|
6771
6925
|
padding: "32px"
|
|
6772
6926
|
})
|
|
6773
6927
|
},
|
|
6774
|
-
/* @__PURE__ */
|
|
6928
|
+
/* @__PURE__ */ React57__default.default.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
6775
6929
|
)
|
|
6776
6930
|
);
|
|
6777
6931
|
}
|
|
6778
|
-
return /* @__PURE__ */
|
|
6932
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
6779
6933
|
"div",
|
|
6780
6934
|
{
|
|
6781
6935
|
onClick: () => {
|
|
@@ -6788,7 +6942,7 @@ function EmailLayoutEditor(props) {
|
|
|
6788
6942
|
minHeight: "100%"
|
|
6789
6943
|
})
|
|
6790
6944
|
},
|
|
6791
|
-
/* @__PURE__ */
|
|
6945
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6792
6946
|
"div",
|
|
6793
6947
|
{
|
|
6794
6948
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6796,7 +6950,7 @@ function EmailLayoutEditor(props) {
|
|
|
6796
6950
|
padding: "32px 0"
|
|
6797
6951
|
})
|
|
6798
6952
|
},
|
|
6799
|
-
/* @__PURE__ */
|
|
6953
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
6800
6954
|
"table",
|
|
6801
6955
|
{
|
|
6802
6956
|
align: "center",
|
|
@@ -6820,7 +6974,7 @@ function EmailLayoutEditor(props) {
|
|
|
6820
6974
|
cellPadding: "0",
|
|
6821
6975
|
border: 0
|
|
6822
6976
|
},
|
|
6823
|
-
/* @__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)))
|
|
6824
6978
|
)
|
|
6825
6979
|
)
|
|
6826
6980
|
);
|
|
@@ -6980,7 +7134,7 @@ function TuneMenu({ blockId }) {
|
|
|
6980
7134
|
resetDocument(nDocument);
|
|
6981
7135
|
setSelectedBlockId(blockId);
|
|
6982
7136
|
};
|
|
6983
|
-
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" })))));
|
|
6984
7138
|
}
|
|
6985
7139
|
|
|
6986
7140
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
@@ -6989,7 +7143,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
6989
7143
|
const hoveredBlockId = useHoveredBlockId();
|
|
6990
7144
|
const draggingBlock = useDraggingBlock();
|
|
6991
7145
|
const blockParent = useBlockParent();
|
|
6992
|
-
const [mouseInside, setMouseInside] =
|
|
7146
|
+
const [mouseInside, setMouseInside] = React57.useState(false);
|
|
6993
7147
|
const blockId = useCurrentBlockId();
|
|
6994
7148
|
const isBeingDragged = (draggingBlock == null ? void 0 : draggingBlock.sourceId) === blockId;
|
|
6995
7149
|
let outline;
|
|
@@ -7002,9 +7156,9 @@ function EditorBlockWrapper({ children }) {
|
|
|
7002
7156
|
if (selectedBlockId !== blockId) {
|
|
7003
7157
|
return null;
|
|
7004
7158
|
}
|
|
7005
|
-
return /* @__PURE__ */
|
|
7159
|
+
return /* @__PURE__ */ React57__default.default.createElement(TuneMenu, { blockId });
|
|
7006
7160
|
};
|
|
7007
|
-
const draggable = Boolean(blockParent);
|
|
7161
|
+
const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
|
|
7008
7162
|
const handleDragStart = (e) => {
|
|
7009
7163
|
if (!blockParent) return;
|
|
7010
7164
|
e.stopPropagation();
|
|
@@ -7015,7 +7169,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7015
7169
|
const handleDragEnd = () => {
|
|
7016
7170
|
setDraggingBlock(null);
|
|
7017
7171
|
};
|
|
7018
|
-
return /* @__PURE__ */
|
|
7172
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
7019
7173
|
material.Box,
|
|
7020
7174
|
{
|
|
7021
7175
|
draggable,
|
|
@@ -7106,8 +7260,8 @@ function ButtonEditor({ style, props }) {
|
|
|
7106
7260
|
const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
|
|
7107
7261
|
const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
|
|
7108
7262
|
const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
|
|
7109
|
-
const [localText, setLocalText] =
|
|
7110
|
-
|
|
7263
|
+
const [localText, setLocalText] = React57.useState(text);
|
|
7264
|
+
React57.useEffect(() => {
|
|
7111
7265
|
setLocalText(text);
|
|
7112
7266
|
}, [text]);
|
|
7113
7267
|
const padding = getButtonSizePadding2(props);
|
|
@@ -7160,7 +7314,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7160
7314
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7161
7315
|
});
|
|
7162
7316
|
};
|
|
7163
|
-
return /* @__PURE__ */
|
|
7317
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7164
7318
|
"input",
|
|
7165
7319
|
{
|
|
7166
7320
|
type: "text",
|
|
@@ -7177,18 +7331,18 @@ function ButtonEditor({ style, props }) {
|
|
|
7177
7331
|
}
|
|
7178
7332
|
));
|
|
7179
7333
|
}
|
|
7180
|
-
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)));
|
|
7181
7335
|
}
|
|
7182
7336
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
7183
|
-
const textareaRef =
|
|
7184
|
-
const [selection, setSelection] =
|
|
7185
|
-
const [linkPrompt, setLinkPrompt] =
|
|
7186
|
-
const pendingSelectionRef =
|
|
7187
|
-
const textRef =
|
|
7188
|
-
|
|
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(() => {
|
|
7189
7343
|
textRef.current = text;
|
|
7190
7344
|
}, [text]);
|
|
7191
|
-
const syncSelection =
|
|
7345
|
+
const syncSelection = React57.useCallback(
|
|
7192
7346
|
(start, end) => {
|
|
7193
7347
|
const next = { start, end };
|
|
7194
7348
|
setSelection(next);
|
|
@@ -7196,7 +7350,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7196
7350
|
},
|
|
7197
7351
|
[trackSelection]
|
|
7198
7352
|
);
|
|
7199
|
-
const trackFocus =
|
|
7353
|
+
const trackFocus = React57.useCallback(
|
|
7200
7354
|
(e) => {
|
|
7201
7355
|
var _a, _b;
|
|
7202
7356
|
const el = e.currentTarget;
|
|
@@ -7206,7 +7360,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7206
7360
|
},
|
|
7207
7361
|
[syncSelection]
|
|
7208
7362
|
);
|
|
7209
|
-
|
|
7363
|
+
React57.useEffect(() => {
|
|
7210
7364
|
const target = pendingSelectionRef.current;
|
|
7211
7365
|
if (!target) return;
|
|
7212
7366
|
const ta = textareaRef.current;
|
|
@@ -7216,7 +7370,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7216
7370
|
syncSelection(target.start, target.end);
|
|
7217
7371
|
pendingSelectionRef.current = null;
|
|
7218
7372
|
}, [text, syncSelection]);
|
|
7219
|
-
|
|
7373
|
+
React57.useEffect(() => {
|
|
7220
7374
|
if (!isSelected || selection.start === selection.end) {
|
|
7221
7375
|
setLinkPrompt(false);
|
|
7222
7376
|
}
|
|
@@ -7309,9 +7463,9 @@ function InlineFormattingToolbar({
|
|
|
7309
7463
|
onLinkSubmit,
|
|
7310
7464
|
onLinkCancel
|
|
7311
7465
|
}) {
|
|
7312
|
-
const [url, setUrl] =
|
|
7313
|
-
const inputRef =
|
|
7314
|
-
|
|
7466
|
+
const [url, setUrl] = React57.useState("");
|
|
7467
|
+
const inputRef = React57.useRef(null);
|
|
7468
|
+
React57.useEffect(() => {
|
|
7315
7469
|
if (linkPrompt) {
|
|
7316
7470
|
setUrl("");
|
|
7317
7471
|
setTimeout(() => {
|
|
@@ -7321,7 +7475,7 @@ function InlineFormattingToolbar({
|
|
|
7321
7475
|
}
|
|
7322
7476
|
}, [linkPrompt]);
|
|
7323
7477
|
const preventBlur = (e) => e.preventDefault();
|
|
7324
|
-
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(
|
|
7325
7479
|
material.TextField,
|
|
7326
7480
|
{
|
|
7327
7481
|
inputRef,
|
|
@@ -7343,7 +7497,7 @@ function InlineFormattingToolbar({
|
|
|
7343
7497
|
},
|
|
7344
7498
|
sx: { width: 220 }
|
|
7345
7499
|
}
|
|
7346
|
-
)) : /* @__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" })))));
|
|
7347
7501
|
}
|
|
7348
7502
|
|
|
7349
7503
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -7416,11 +7570,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7416
7570
|
const isSelected = selectedBlockId === blockId;
|
|
7417
7571
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
7418
7572
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
7419
|
-
const [localText, setLocalText] =
|
|
7573
|
+
const [localText, setLocalText] = React57.useState(textContent);
|
|
7420
7574
|
const isMarkdown = (_c = props == null ? void 0 : props.markdown) != null ? _c : false;
|
|
7421
7575
|
const rootBlock = document2.root;
|
|
7422
7576
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
7423
|
-
|
|
7577
|
+
React57.useEffect(() => {
|
|
7424
7578
|
setLocalText(textContent);
|
|
7425
7579
|
}, [textContent]);
|
|
7426
7580
|
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -7466,9 +7620,9 @@ function HeadingEditor({ style, props }) {
|
|
|
7466
7620
|
const handleTextChange = (e) => {
|
|
7467
7621
|
commitText(e.target.value);
|
|
7468
7622
|
};
|
|
7469
|
-
const displayRef =
|
|
7470
|
-
const lastDisplayHeightRef =
|
|
7471
|
-
|
|
7623
|
+
const displayRef = React57.useRef(null);
|
|
7624
|
+
const lastDisplayHeightRef = React57.useRef(0);
|
|
7625
|
+
React57.useLayoutEffect(() => {
|
|
7472
7626
|
if (!isSelected && displayRef.current) {
|
|
7473
7627
|
const h = displayRef.current.offsetHeight;
|
|
7474
7628
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -7494,11 +7648,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7494
7648
|
});
|
|
7495
7649
|
}
|
|
7496
7650
|
});
|
|
7497
|
-
|
|
7651
|
+
React57.useLayoutEffect(() => {
|
|
7498
7652
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7499
7653
|
}, [localText, isSelected]);
|
|
7500
7654
|
if (isSelected) {
|
|
7501
|
-
return /* @__PURE__ */
|
|
7655
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
7502
7656
|
"textarea",
|
|
7503
7657
|
{
|
|
7504
7658
|
ref: textareaRef,
|
|
@@ -7516,7 +7670,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7516
7670
|
rows: 1,
|
|
7517
7671
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7518
7672
|
}
|
|
7519
|
-
), /* @__PURE__ */
|
|
7673
|
+
), /* @__PURE__ */ React57__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7520
7674
|
}
|
|
7521
7675
|
const headingProps = isMarkdown ? {
|
|
7522
7676
|
ref: displayRef,
|
|
@@ -7525,11 +7679,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7525
7679
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
7526
7680
|
switch (level) {
|
|
7527
7681
|
case "h1":
|
|
7528
|
-
return /* @__PURE__ */
|
|
7682
|
+
return /* @__PURE__ */ React57__default.default.createElement("h1", __spreadValues({}, headingProps));
|
|
7529
7683
|
case "h2":
|
|
7530
|
-
return /* @__PURE__ */
|
|
7684
|
+
return /* @__PURE__ */ React57__default.default.createElement("h2", __spreadValues({}, headingProps));
|
|
7531
7685
|
case "h3":
|
|
7532
|
-
return /* @__PURE__ */
|
|
7686
|
+
return /* @__PURE__ */ React57__default.default.createElement("h3", __spreadValues({}, headingProps));
|
|
7533
7687
|
}
|
|
7534
7688
|
}
|
|
7535
7689
|
function HtmlEditor({ style, props }) {
|
|
@@ -7538,8 +7692,8 @@ function HtmlEditor({ style, props }) {
|
|
|
7538
7692
|
const selectedBlockId = useSelectedBlockId();
|
|
7539
7693
|
const isSelected = selectedBlockId === blockId;
|
|
7540
7694
|
const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
|
|
7541
|
-
const [localContents, setLocalContents] =
|
|
7542
|
-
|
|
7695
|
+
const [localContents, setLocalContents] = React57.useState(contents);
|
|
7696
|
+
React57.useEffect(() => {
|
|
7543
7697
|
setLocalContents(contents);
|
|
7544
7698
|
}, [contents]);
|
|
7545
7699
|
const cssStyle = {
|
|
@@ -7594,7 +7748,7 @@ function HtmlEditor({ style, props }) {
|
|
|
7594
7748
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7595
7749
|
});
|
|
7596
7750
|
};
|
|
7597
|
-
return /* @__PURE__ */
|
|
7751
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7598
7752
|
"textarea",
|
|
7599
7753
|
{
|
|
7600
7754
|
value: localContents,
|
|
@@ -7614,9 +7768,9 @@ function HtmlEditor({ style, props }) {
|
|
|
7614
7768
|
));
|
|
7615
7769
|
}
|
|
7616
7770
|
if (!contents) {
|
|
7617
|
-
return /* @__PURE__ */
|
|
7771
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle });
|
|
7618
7772
|
}
|
|
7619
|
-
return /* @__PURE__ */
|
|
7773
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
7620
7774
|
}
|
|
7621
7775
|
function getImageBorderRadius2(shape, size) {
|
|
7622
7776
|
switch (shape) {
|
|
@@ -7649,36 +7803,36 @@ function SignatureEditor({ style, props }) {
|
|
|
7649
7803
|
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
7650
7804
|
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
7651
7805
|
const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
|
|
7652
|
-
const [localGreeting, setLocalGreeting] =
|
|
7653
|
-
const [localName, setLocalName] =
|
|
7654
|
-
const [localTitle, setLocalTitle] =
|
|
7655
|
-
const [localCompany, setLocalCompany] =
|
|
7656
|
-
const [localAddress, setLocalAddress] =
|
|
7657
|
-
const [localEmail, setLocalEmail] =
|
|
7658
|
-
const [localPhone, setLocalPhone] =
|
|
7659
|
-
const [localWebsite, setLocalWebsite] =
|
|
7660
|
-
|
|
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(() => {
|
|
7661
7815
|
setLocalGreeting(greeting);
|
|
7662
7816
|
}, [greeting]);
|
|
7663
|
-
|
|
7817
|
+
React57.useEffect(() => {
|
|
7664
7818
|
setLocalName(name);
|
|
7665
7819
|
}, [name]);
|
|
7666
|
-
|
|
7820
|
+
React57.useEffect(() => {
|
|
7667
7821
|
setLocalTitle(title);
|
|
7668
7822
|
}, [title]);
|
|
7669
|
-
|
|
7823
|
+
React57.useEffect(() => {
|
|
7670
7824
|
setLocalCompany(company);
|
|
7671
7825
|
}, [company]);
|
|
7672
|
-
|
|
7826
|
+
React57.useEffect(() => {
|
|
7673
7827
|
setLocalAddress(address);
|
|
7674
7828
|
}, [address]);
|
|
7675
|
-
|
|
7829
|
+
React57.useEffect(() => {
|
|
7676
7830
|
setLocalEmail(email);
|
|
7677
7831
|
}, [email]);
|
|
7678
|
-
|
|
7832
|
+
React57.useEffect(() => {
|
|
7679
7833
|
setLocalPhone(phone);
|
|
7680
7834
|
}, [phone]);
|
|
7681
|
-
|
|
7835
|
+
React57.useEffect(() => {
|
|
7682
7836
|
setLocalWebsite(website);
|
|
7683
7837
|
}, [website]);
|
|
7684
7838
|
const updateProps = (updates) => {
|
|
@@ -7731,7 +7885,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7731
7885
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
7732
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
|
|
7733
7887
|
};
|
|
7734
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
7888
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React57__default.default.createElement(
|
|
7735
7889
|
"img",
|
|
7736
7890
|
{
|
|
7737
7891
|
src: imageUrl,
|
|
@@ -7749,7 +7903,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7749
7903
|
}
|
|
7750
7904
|
}
|
|
7751
7905
|
) : null;
|
|
7752
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
7906
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React57__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React57__default.default.createElement(
|
|
7753
7907
|
"input",
|
|
7754
7908
|
{
|
|
7755
7909
|
value: localGreeting,
|
|
@@ -7760,8 +7914,8 @@ function SignatureEditor({ style, props }) {
|
|
|
7760
7914
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
7761
7915
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
7762
7916
|
}
|
|
7763
|
-
)) : greeting ? /* @__PURE__ */
|
|
7764
|
-
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(
|
|
7765
7919
|
"input",
|
|
7766
7920
|
{
|
|
7767
7921
|
value: localName,
|
|
@@ -7772,7 +7926,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7772
7926
|
placeholder: "Name",
|
|
7773
7927
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
7774
7928
|
}
|
|
7775
|
-
), /* @__PURE__ */
|
|
7929
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7776
7930
|
"input",
|
|
7777
7931
|
{
|
|
7778
7932
|
value: localTitle,
|
|
@@ -7783,7 +7937,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7783
7937
|
placeholder: "Title",
|
|
7784
7938
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7785
7939
|
}
|
|
7786
|
-
), /* @__PURE__ */
|
|
7940
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7787
7941
|
"input",
|
|
7788
7942
|
{
|
|
7789
7943
|
value: localCompany,
|
|
@@ -7794,7 +7948,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7794
7948
|
placeholder: "Company",
|
|
7795
7949
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7796
7950
|
}
|
|
7797
|
-
), /* @__PURE__ */
|
|
7951
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7798
7952
|
"input",
|
|
7799
7953
|
{
|
|
7800
7954
|
value: localAddress,
|
|
@@ -7805,7 +7959,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7805
7959
|
placeholder: "Address",
|
|
7806
7960
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7807
7961
|
}
|
|
7808
|
-
), /* @__PURE__ */
|
|
7962
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7809
7963
|
"input",
|
|
7810
7964
|
{
|
|
7811
7965
|
value: localEmail,
|
|
@@ -7816,7 +7970,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7816
7970
|
placeholder: "Email",
|
|
7817
7971
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
7818
7972
|
}
|
|
7819
|
-
), /* @__PURE__ */
|
|
7973
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7820
7974
|
"input",
|
|
7821
7975
|
{
|
|
7822
7976
|
value: localPhone,
|
|
@@ -7827,7 +7981,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7827
7981
|
placeholder: "Phone",
|
|
7828
7982
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7829
7983
|
}
|
|
7830
|
-
), /* @__PURE__ */
|
|
7984
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
7831
7985
|
"input",
|
|
7832
7986
|
{
|
|
7833
7987
|
value: localWebsite,
|
|
@@ -7838,11 +7992,11 @@ function SignatureEditor({ style, props }) {
|
|
|
7838
7992
|
placeholder: "Website",
|
|
7839
7993
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7840
7994
|
}
|
|
7841
|
-
)) : /* @__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"));
|
|
7842
7996
|
if (layout === "vertical") {
|
|
7843
|
-
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);
|
|
7844
7998
|
}
|
|
7845
|
-
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)))));
|
|
7846
8000
|
}
|
|
7847
8001
|
function getFontFamily10(fontFamily) {
|
|
7848
8002
|
switch (fontFamily) {
|
|
@@ -7902,11 +8056,11 @@ function TextEditor({ style, props }) {
|
|
|
7902
8056
|
const document2 = useDocument();
|
|
7903
8057
|
const isSelected = selectedBlockId === blockId;
|
|
7904
8058
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
7905
|
-
const [localText, setLocalText] =
|
|
8059
|
+
const [localText, setLocalText] = React57.useState(textContent);
|
|
7906
8060
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
7907
8061
|
const rootBlock = document2.root;
|
|
7908
8062
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
7909
|
-
|
|
8063
|
+
React57.useEffect(() => {
|
|
7910
8064
|
setLocalText(textContent);
|
|
7911
8065
|
}, [textContent]);
|
|
7912
8066
|
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -7954,9 +8108,9 @@ function TextEditor({ style, props }) {
|
|
|
7954
8108
|
const handleTextChange = (e) => {
|
|
7955
8109
|
commitText(e.target.value);
|
|
7956
8110
|
};
|
|
7957
|
-
const displayRef =
|
|
7958
|
-
const lastDisplayHeightRef =
|
|
7959
|
-
|
|
8111
|
+
const displayRef = React57.useRef(null);
|
|
8112
|
+
const lastDisplayHeightRef = React57.useRef(0);
|
|
8113
|
+
React57.useLayoutEffect(() => {
|
|
7960
8114
|
if (!isSelected && displayRef.current) {
|
|
7961
8115
|
const h = displayRef.current.offsetHeight;
|
|
7962
8116
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -7982,11 +8136,11 @@ function TextEditor({ style, props }) {
|
|
|
7982
8136
|
});
|
|
7983
8137
|
}
|
|
7984
8138
|
});
|
|
7985
|
-
|
|
8139
|
+
React57.useLayoutEffect(() => {
|
|
7986
8140
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7987
8141
|
}, [localText, isSelected]);
|
|
7988
8142
|
if (isSelected) {
|
|
7989
|
-
return /* @__PURE__ */
|
|
8143
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
7990
8144
|
"textarea",
|
|
7991
8145
|
{
|
|
7992
8146
|
ref: textareaRef,
|
|
@@ -8004,10 +8158,10 @@ function TextEditor({ style, props }) {
|
|
|
8004
8158
|
rows: 1,
|
|
8005
8159
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
8006
8160
|
}
|
|
8007
|
-
), /* @__PURE__ */
|
|
8161
|
+
), /* @__PURE__ */ React57__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
8008
8162
|
}
|
|
8009
8163
|
if (isMarkdown) {
|
|
8010
|
-
return /* @__PURE__ */
|
|
8164
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8011
8165
|
"div",
|
|
8012
8166
|
{
|
|
8013
8167
|
ref: displayRef,
|
|
@@ -8016,34 +8170,34 @@ function TextEditor({ style, props }) {
|
|
|
8016
8170
|
}
|
|
8017
8171
|
);
|
|
8018
8172
|
}
|
|
8019
|
-
return /* @__PURE__ */
|
|
8173
|
+
return /* @__PURE__ */ React57__default.default.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
8020
8174
|
}
|
|
8021
8175
|
|
|
8022
8176
|
// src/editor/core.tsx
|
|
8023
8177
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
8024
8178
|
Avatar: {
|
|
8025
8179
|
schema: AvatarPropsSchema,
|
|
8026
|
-
Component: (props) => /* @__PURE__ */
|
|
8180
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
8027
8181
|
},
|
|
8028
8182
|
Button: {
|
|
8029
8183
|
schema: ButtonPropsSchema,
|
|
8030
|
-
Component: (props) => /* @__PURE__ */
|
|
8184
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
8031
8185
|
},
|
|
8032
8186
|
Container: {
|
|
8033
8187
|
schema: container_props_schema_default,
|
|
8034
|
-
Component: (props) => /* @__PURE__ */
|
|
8188
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
8035
8189
|
},
|
|
8036
8190
|
ColumnsContainer: {
|
|
8037
8191
|
schema: columns_container_props_schema_default2,
|
|
8038
|
-
Component: (props) => /* @__PURE__ */
|
|
8192
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
8039
8193
|
},
|
|
8040
8194
|
Heading: {
|
|
8041
8195
|
schema: HeadingPropsSchema,
|
|
8042
|
-
Component: (props) => /* @__PURE__ */
|
|
8196
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
8043
8197
|
},
|
|
8044
8198
|
Html: {
|
|
8045
8199
|
schema: HtmlPropsSchema,
|
|
8046
|
-
Component: (props) => /* @__PURE__ */
|
|
8200
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
8047
8201
|
},
|
|
8048
8202
|
Image: {
|
|
8049
8203
|
schema: ImagePropsSchema,
|
|
@@ -8055,28 +8209,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
8055
8209
|
linkHref: null
|
|
8056
8210
|
})
|
|
8057
8211
|
});
|
|
8058
|
-
return /* @__PURE__ */
|
|
8212
|
+
return /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
8059
8213
|
}
|
|
8060
8214
|
},
|
|
8061
8215
|
Text: {
|
|
8062
8216
|
schema: TextPropsSchema,
|
|
8063
|
-
Component: (props) => /* @__PURE__ */
|
|
8217
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
8064
8218
|
},
|
|
8065
8219
|
EmailLayout: {
|
|
8066
8220
|
schema: email_layout_props_schema_default,
|
|
8067
|
-
Component: (p) => /* @__PURE__ */
|
|
8221
|
+
Component: (p) => /* @__PURE__ */ React57__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
8068
8222
|
},
|
|
8069
8223
|
Spacer: {
|
|
8070
8224
|
schema: SpacerPropsSchema,
|
|
8071
|
-
Component: (props) => /* @__PURE__ */
|
|
8225
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
8072
8226
|
},
|
|
8073
8227
|
Divider: {
|
|
8074
8228
|
schema: DividerPropsSchema,
|
|
8075
|
-
Component: (props) => /* @__PURE__ */
|
|
8229
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
8076
8230
|
},
|
|
8077
8231
|
Signature: {
|
|
8078
8232
|
schema: SignaturePropsSchema,
|
|
8079
|
-
Component: (props) => /* @__PURE__ */
|
|
8233
|
+
Component: (props) => /* @__PURE__ */ React57__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
8080
8234
|
}
|
|
8081
8235
|
});
|
|
8082
8236
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -8084,15 +8238,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
8084
8238
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
8085
8239
|
|
|
8086
8240
|
// src/editor/editor-block.tsx
|
|
8087
|
-
var EditorBlockContext =
|
|
8088
|
-
var useCurrentBlockId = () =>
|
|
8241
|
+
var EditorBlockContext = React57.createContext(null);
|
|
8242
|
+
var useCurrentBlockId = () => React57.useContext(EditorBlockContext);
|
|
8089
8243
|
function EditorBlock({ id }) {
|
|
8090
8244
|
const document2 = useDocument();
|
|
8091
8245
|
const block = document2[id];
|
|
8092
8246
|
if (!block) {
|
|
8093
8247
|
throw new Error("Could not find block");
|
|
8094
8248
|
}
|
|
8095
|
-
return /* @__PURE__ */
|
|
8249
|
+
return /* @__PURE__ */ React57__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React57__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
8096
8250
|
}
|
|
8097
8251
|
function ToggleInspectorPanelButton() {
|
|
8098
8252
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -8100,20 +8254,20 @@ function ToggleInspectorPanelButton() {
|
|
|
8100
8254
|
toggleInspectorDrawerOpen();
|
|
8101
8255
|
};
|
|
8102
8256
|
if (inspectorDrawerOpen) {
|
|
8103
|
-
return /* @__PURE__ */
|
|
8257
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
8104
8258
|
}
|
|
8105
|
-
return /* @__PURE__ */
|
|
8259
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
8106
8260
|
}
|
|
8107
8261
|
function useIcon() {
|
|
8108
8262
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8109
8263
|
if (samplesDrawerOpen) {
|
|
8110
|
-
return /* @__PURE__ */
|
|
8264
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
8111
8265
|
}
|
|
8112
|
-
return /* @__PURE__ */
|
|
8266
|
+
return /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
8113
8267
|
}
|
|
8114
8268
|
function ToggleSamplesPanelButton() {
|
|
8115
8269
|
const icon = useIcon();
|
|
8116
|
-
return /* @__PURE__ */
|
|
8270
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
8117
8271
|
}
|
|
8118
8272
|
function formatHtml(html2, spaces = 2) {
|
|
8119
8273
|
try {
|
|
@@ -8161,8 +8315,8 @@ function json(value) {
|
|
|
8161
8315
|
|
|
8162
8316
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
8163
8317
|
function HighlightedCodePanel({ type, value }) {
|
|
8164
|
-
const [code, setCode] =
|
|
8165
|
-
|
|
8318
|
+
const [code, setCode] = React57.useState(null);
|
|
8319
|
+
React57.useEffect(() => {
|
|
8166
8320
|
switch (type) {
|
|
8167
8321
|
case "html":
|
|
8168
8322
|
html(value).then(setCode);
|
|
@@ -8175,7 +8329,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8175
8329
|
if (code === null) {
|
|
8176
8330
|
return null;
|
|
8177
8331
|
}
|
|
8178
|
-
return /* @__PURE__ */
|
|
8332
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8179
8333
|
"pre",
|
|
8180
8334
|
{
|
|
8181
8335
|
style: {
|
|
@@ -8200,18 +8354,18 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8200
8354
|
// src/app/email-canvas/html-panel.tsx
|
|
8201
8355
|
function HtmlPanel() {
|
|
8202
8356
|
const document2 = useDocument();
|
|
8203
|
-
const code =
|
|
8204
|
-
return /* @__PURE__ */
|
|
8357
|
+
const code = React57.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
8358
|
+
return /* @__PURE__ */ React57__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
8205
8359
|
}
|
|
8206
8360
|
function JsonPanel() {
|
|
8207
8361
|
const document2 = useDocument();
|
|
8208
|
-
const code =
|
|
8209
|
-
return /* @__PURE__ */
|
|
8362
|
+
const code = React57.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
8363
|
+
return /* @__PURE__ */ React57__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
8210
8364
|
}
|
|
8211
8365
|
function TextPanel() {
|
|
8212
8366
|
const document2 = useDocument();
|
|
8213
|
-
const text =
|
|
8214
|
-
return /* @__PURE__ */
|
|
8367
|
+
const text = React57.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
8368
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8215
8369
|
"pre",
|
|
8216
8370
|
{
|
|
8217
8371
|
style: {
|
|
@@ -8247,35 +8401,35 @@ function MainTabsGroup() {
|
|
|
8247
8401
|
setSelectedMainTab("editor");
|
|
8248
8402
|
}
|
|
8249
8403
|
};
|
|
8250
|
-
return /* @__PURE__ */
|
|
8404
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8251
8405
|
material.Tab,
|
|
8252
8406
|
{
|
|
8253
8407
|
value: "editor",
|
|
8254
|
-
label: /* @__PURE__ */
|
|
8408
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
8255
8409
|
}
|
|
8256
|
-
), /* @__PURE__ */
|
|
8410
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8257
8411
|
material.Tab,
|
|
8258
8412
|
{
|
|
8259
8413
|
value: "preview",
|
|
8260
|
-
label: /* @__PURE__ */
|
|
8414
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
8261
8415
|
}
|
|
8262
|
-
), /* @__PURE__ */
|
|
8416
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8263
8417
|
material.Tab,
|
|
8264
8418
|
{
|
|
8265
8419
|
value: "html",
|
|
8266
|
-
label: /* @__PURE__ */
|
|
8420
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
8267
8421
|
}
|
|
8268
|
-
), /* @__PURE__ */
|
|
8422
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8269
8423
|
material.Tab,
|
|
8270
8424
|
{
|
|
8271
8425
|
value: "text",
|
|
8272
|
-
label: /* @__PURE__ */
|
|
8426
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
8273
8427
|
}
|
|
8274
|
-
), /* @__PURE__ */
|
|
8428
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8275
8429
|
material.Tab,
|
|
8276
8430
|
{
|
|
8277
8431
|
value: "json",
|
|
8278
|
-
label: /* @__PURE__ */
|
|
8432
|
+
label: /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
8279
8433
|
}
|
|
8280
8434
|
));
|
|
8281
8435
|
}
|
|
@@ -8290,8 +8444,8 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8290
8444
|
} = useEmailEditor();
|
|
8291
8445
|
const { showMessage } = useSnackbar();
|
|
8292
8446
|
const document2 = useDocument();
|
|
8293
|
-
const [dialogMode, setDialogMode] =
|
|
8294
|
-
const [nameError, setNameError] =
|
|
8447
|
+
const [dialogMode, setDialogMode] = React57.useState(null);
|
|
8448
|
+
const [nameError, setNameError] = React57.useState(null);
|
|
8295
8449
|
const hasOpenRow = Boolean(currentTemplateId);
|
|
8296
8450
|
const isSample = currentTemplateKind === "sample";
|
|
8297
8451
|
const primaryLabel = hasOpenRow ? "Save" : "Save as new\u2026";
|
|
@@ -8328,7 +8482,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8328
8482
|
return false;
|
|
8329
8483
|
}
|
|
8330
8484
|
});
|
|
8331
|
-
return /* @__PURE__ */
|
|
8485
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
8332
8486
|
material.Box,
|
|
8333
8487
|
{
|
|
8334
8488
|
sx: {
|
|
@@ -8341,7 +8495,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8341
8495
|
pb: 3
|
|
8342
8496
|
}
|
|
8343
8497
|
},
|
|
8344
|
-
/* @__PURE__ */
|
|
8498
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
8345
8499
|
material.Box,
|
|
8346
8500
|
{
|
|
8347
8501
|
sx: {
|
|
@@ -8356,7 +8510,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8356
8510
|
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
8357
8511
|
}
|
|
8358
8512
|
},
|
|
8359
|
-
hasOpenRow && currentTemplateName && /* @__PURE__ */
|
|
8513
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React57__default.default.createElement(
|
|
8360
8514
|
material.Box,
|
|
8361
8515
|
{
|
|
8362
8516
|
sx: {
|
|
@@ -8372,25 +8526,25 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8372
8526
|
title: currentTemplateName
|
|
8373
8527
|
},
|
|
8374
8528
|
isSample ? "Sample \xB7 " : "",
|
|
8375
|
-
/* @__PURE__ */
|
|
8529
|
+
/* @__PURE__ */ React57__default.default.createElement(material.Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8376
8530
|
),
|
|
8377
|
-
/* @__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(
|
|
8378
8532
|
material.Button,
|
|
8379
8533
|
{
|
|
8380
8534
|
variant: "contained",
|
|
8381
8535
|
size: "large",
|
|
8382
|
-
startIcon: /* @__PURE__ */
|
|
8536
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SaveOutlined, null),
|
|
8383
8537
|
onClick: handlePrimary,
|
|
8384
8538
|
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8385
8539
|
},
|
|
8386
8540
|
primaryLabel
|
|
8387
8541
|
)),
|
|
8388
|
-
hasOpenRow && saveAs && /* @__PURE__ */
|
|
8542
|
+
hasOpenRow && saveAs && /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Save as a new template" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8389
8543
|
material.Button,
|
|
8390
8544
|
{
|
|
8391
8545
|
variant: "outlined",
|
|
8392
8546
|
size: "large",
|
|
8393
|
-
startIcon: /* @__PURE__ */
|
|
8547
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.SaveAsOutlined, null),
|
|
8394
8548
|
onClick: () => {
|
|
8395
8549
|
setNameError(null);
|
|
8396
8550
|
setDialogMode("save-as");
|
|
@@ -8399,12 +8553,12 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8399
8553
|
},
|
|
8400
8554
|
"Save as\u2026"
|
|
8401
8555
|
)),
|
|
8402
|
-
saveAs && /* @__PURE__ */
|
|
8556
|
+
saveAs && /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Start a fresh template" }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8403
8557
|
material.Button,
|
|
8404
8558
|
{
|
|
8405
8559
|
variant: "text",
|
|
8406
8560
|
size: "large",
|
|
8407
|
-
startIcon: /* @__PURE__ */
|
|
8561
|
+
startIcon: /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
8408
8562
|
onClick: () => {
|
|
8409
8563
|
setNameError(null);
|
|
8410
8564
|
setDialogMode("new-blank");
|
|
@@ -8414,7 +8568,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8414
8568
|
"New"
|
|
8415
8569
|
))
|
|
8416
8570
|
)
|
|
8417
|
-
), /* @__PURE__ */
|
|
8571
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8418
8572
|
SaveTemplateDialog,
|
|
8419
8573
|
{
|
|
8420
8574
|
open: dialogMode !== null,
|
|
@@ -8452,7 +8606,7 @@ function SubjectInput() {
|
|
|
8452
8606
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
8453
8607
|
});
|
|
8454
8608
|
};
|
|
8455
|
-
return /* @__PURE__ */
|
|
8609
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8456
8610
|
material.Box,
|
|
8457
8611
|
{
|
|
8458
8612
|
sx: {
|
|
@@ -8469,8 +8623,8 @@ function SubjectInput() {
|
|
|
8469
8623
|
gap: 1.5
|
|
8470
8624
|
}
|
|
8471
8625
|
},
|
|
8472
|
-
/* @__PURE__ */
|
|
8473
|
-
/* @__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(
|
|
8474
8628
|
material.InputBase,
|
|
8475
8629
|
{
|
|
8476
8630
|
fullWidth: true,
|
|
@@ -8496,7 +8650,7 @@ function SubjectPreview() {
|
|
|
8496
8650
|
if (!subject) return null;
|
|
8497
8651
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
8498
8652
|
const rendered = substituteSampleValues(subject, samples);
|
|
8499
|
-
return /* @__PURE__ */
|
|
8653
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8500
8654
|
material.Box,
|
|
8501
8655
|
{
|
|
8502
8656
|
sx: {
|
|
@@ -8513,8 +8667,8 @@ function SubjectPreview() {
|
|
|
8513
8667
|
gap: 1.5
|
|
8514
8668
|
}
|
|
8515
8669
|
},
|
|
8516
|
-
/* @__PURE__ */
|
|
8517
|
-
/* @__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)
|
|
8518
8672
|
);
|
|
8519
8673
|
}
|
|
8520
8674
|
function generateId3() {
|
|
@@ -8561,12 +8715,12 @@ function findImageFile(items) {
|
|
|
8561
8715
|
}
|
|
8562
8716
|
function ImageDropPasteHandler({ enabled, children }) {
|
|
8563
8717
|
const { uploadImage } = useImageCallbacks();
|
|
8564
|
-
const wrapperRef =
|
|
8565
|
-
const dragDepth =
|
|
8566
|
-
const [dragging, setDragging] =
|
|
8567
|
-
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);
|
|
8568
8722
|
const active = enabled && Boolean(uploadImage);
|
|
8569
|
-
|
|
8723
|
+
React57.useEffect(() => {
|
|
8570
8724
|
if (!active || !uploadImage) return;
|
|
8571
8725
|
const handlePaste = (e) => __async(null, null, function* () {
|
|
8572
8726
|
var _a;
|
|
@@ -8587,7 +8741,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8587
8741
|
window.addEventListener("paste", handlePaste);
|
|
8588
8742
|
return () => window.removeEventListener("paste", handlePaste);
|
|
8589
8743
|
}, [active, uploadImage]);
|
|
8590
|
-
if (!active) return /* @__PURE__ */
|
|
8744
|
+
if (!active) return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, children);
|
|
8591
8745
|
const onDragEnter = (e) => {
|
|
8592
8746
|
var _a, _b;
|
|
8593
8747
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -8620,7 +8774,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8620
8774
|
setUploading(false);
|
|
8621
8775
|
}
|
|
8622
8776
|
});
|
|
8623
|
-
return /* @__PURE__ */
|
|
8777
|
+
return /* @__PURE__ */ React57__default.default.createElement(
|
|
8624
8778
|
material.Box,
|
|
8625
8779
|
{
|
|
8626
8780
|
ref: wrapperRef,
|
|
@@ -8631,7 +8785,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8631
8785
|
sx: { position: "relative" }
|
|
8632
8786
|
},
|
|
8633
8787
|
children,
|
|
8634
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
8788
|
+
(dragging || uploading) && /* @__PURE__ */ React57__default.default.createElement(
|
|
8635
8789
|
material.Box,
|
|
8636
8790
|
{
|
|
8637
8791
|
sx: {
|
|
@@ -8650,7 +8804,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8650
8804
|
zIndex: 10
|
|
8651
8805
|
}
|
|
8652
8806
|
},
|
|
8653
|
-
/* @__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")
|
|
8654
8808
|
)
|
|
8655
8809
|
);
|
|
8656
8810
|
}
|
|
@@ -8690,7 +8844,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8690
8844
|
var _a;
|
|
8691
8845
|
switch (selectedMainTab) {
|
|
8692
8846
|
case "editor":
|
|
8693
|
-
return /* @__PURE__ */
|
|
8847
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React57__default.default.createElement(EditorBlock, { id: "root" }));
|
|
8694
8848
|
case "preview": {
|
|
8695
8849
|
const rootBlock = document2.root;
|
|
8696
8850
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -8698,18 +8852,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8698
8852
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
8699
8853
|
);
|
|
8700
8854
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
8701
|
-
return /* @__PURE__ */
|
|
8855
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React57__default.default.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
8702
8856
|
}
|
|
8703
8857
|
case "html":
|
|
8704
|
-
return /* @__PURE__ */
|
|
8858
|
+
return /* @__PURE__ */ React57__default.default.createElement(HtmlPanel, null);
|
|
8705
8859
|
case "text":
|
|
8706
|
-
return /* @__PURE__ */
|
|
8860
|
+
return /* @__PURE__ */ React57__default.default.createElement(TextPanel, null);
|
|
8707
8861
|
case "json":
|
|
8708
|
-
return /* @__PURE__ */
|
|
8862
|
+
return /* @__PURE__ */ React57__default.default.createElement(JsonPanel, null);
|
|
8709
8863
|
}
|
|
8710
8864
|
};
|
|
8711
8865
|
const showSaveButtons = persistenceEnabled;
|
|
8712
|
-
return /* @__PURE__ */
|
|
8866
|
+
return /* @__PURE__ */ React57__default.default.createElement(React57__default.default.Fragment, null, /* @__PURE__ */ React57__default.default.createElement(
|
|
8713
8867
|
material.Stack,
|
|
8714
8868
|
{
|
|
8715
8869
|
sx: {
|
|
@@ -8726,10 +8880,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8726
8880
|
justifyContent: "space-between",
|
|
8727
8881
|
alignItems: "center"
|
|
8728
8882
|
},
|
|
8729
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
8730
|
-
/* @__PURE__ */
|
|
8731
|
-
/* @__PURE__ */
|
|
8732
|
-
), 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(
|
|
8733
8887
|
material.Box,
|
|
8734
8888
|
{
|
|
8735
8889
|
sx: {
|
|
@@ -8745,8 +8899,8 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8745
8899
|
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
8746
8900
|
}
|
|
8747
8901
|
},
|
|
8748
|
-
/* @__PURE__ */
|
|
8749
|
-
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 })
|
|
8750
8904
|
)));
|
|
8751
8905
|
}
|
|
8752
8906
|
|
|
@@ -8783,7 +8937,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
8783
8937
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
8784
8938
|
});
|
|
8785
8939
|
}
|
|
8786
|
-
var EmailEditorInternal =
|
|
8940
|
+
var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
8787
8941
|
const {
|
|
8788
8942
|
drawerEnterDuration = 225,
|
|
8789
8943
|
drawerExitDuration = 225,
|
|
@@ -8805,10 +8959,10 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8805
8959
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8806
8960
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
8807
8961
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
8808
|
-
const onChangeRef =
|
|
8962
|
+
const onChangeRef = React57.useRef(onChange);
|
|
8809
8963
|
onChangeRef.current = onChange;
|
|
8810
|
-
const prevDocJsonRef =
|
|
8811
|
-
|
|
8964
|
+
const prevDocJsonRef = React57.useRef("");
|
|
8965
|
+
React57.useEffect(() => {
|
|
8812
8966
|
var _a;
|
|
8813
8967
|
const docJson = JSON.stringify(currentDocument);
|
|
8814
8968
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -8816,7 +8970,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8816
8970
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
8817
8971
|
}
|
|
8818
8972
|
}, [currentDocument]);
|
|
8819
|
-
|
|
8973
|
+
React57.useImperativeHandle(ref, () => ({
|
|
8820
8974
|
saveTemplate: () => {
|
|
8821
8975
|
return saveTemplate();
|
|
8822
8976
|
},
|
|
@@ -8828,15 +8982,16 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8828
8982
|
return getDocument();
|
|
8829
8983
|
}
|
|
8830
8984
|
}));
|
|
8831
|
-
return /* @__PURE__ */
|
|
8985
|
+
return /* @__PURE__ */ React57__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React57__default.default.createElement(
|
|
8832
8986
|
InspectorDrawer,
|
|
8833
8987
|
{
|
|
8834
8988
|
enterDuration: drawerEnterDuration,
|
|
8835
8989
|
exitDuration: drawerExitDuration,
|
|
8836
8990
|
deleteTemplate,
|
|
8837
|
-
copyTemplate
|
|
8991
|
+
copyTemplate,
|
|
8992
|
+
renameTemplate
|
|
8838
8993
|
}
|
|
8839
|
-
), /* @__PURE__ */
|
|
8994
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8840
8995
|
SamplesDrawer,
|
|
8841
8996
|
{
|
|
8842
8997
|
enterDuration: drawerEnterDuration,
|
|
@@ -8852,7 +9007,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8852
9007
|
setTemplateKind,
|
|
8853
9008
|
saveAs
|
|
8854
9009
|
}
|
|
8855
|
-
), /* @__PURE__ */
|
|
9010
|
+
), /* @__PURE__ */ React57__default.default.createElement(
|
|
8856
9011
|
material.Stack,
|
|
8857
9012
|
{
|
|
8858
9013
|
sx: {
|
|
@@ -8861,10 +9016,10 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
8861
9016
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
8862
9017
|
}
|
|
8863
9018
|
},
|
|
8864
|
-
/* @__PURE__ */
|
|
9019
|
+
/* @__PURE__ */ React57__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
8865
9020
|
));
|
|
8866
9021
|
});
|
|
8867
|
-
var EmailEditor =
|
|
9022
|
+
var EmailEditor = React57.forwardRef((props, ref) => {
|
|
8868
9023
|
const {
|
|
8869
9024
|
initialTemplate: initialTemplateProp,
|
|
8870
9025
|
initialTemplateId,
|
|
@@ -8889,23 +9044,23 @@ var EmailEditor = React62.forwardRef((props, ref) => {
|
|
|
8889
9044
|
deleteImage,
|
|
8890
9045
|
theme
|
|
8891
9046
|
} = props;
|
|
8892
|
-
const resolvedTemplate =
|
|
9047
|
+
const resolvedTemplate = React57.useMemo(
|
|
8893
9048
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
8894
9049
|
[initialTemplateProp]
|
|
8895
9050
|
);
|
|
8896
|
-
const prevTemplateRef =
|
|
9051
|
+
const prevTemplateRef = React57.useRef(void 0);
|
|
8897
9052
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
8898
9053
|
prevTemplateRef.current = resolvedTemplate;
|
|
8899
9054
|
resetDocument(resolvedTemplate);
|
|
8900
9055
|
}
|
|
8901
|
-
|
|
9056
|
+
React57.useEffect(() => {
|
|
8902
9057
|
setPersistenceEnabled(persistenceEnabled);
|
|
8903
9058
|
}, [persistenceEnabled]);
|
|
8904
|
-
const imageCallbacks =
|
|
9059
|
+
const imageCallbacks = React57.useMemo(
|
|
8905
9060
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
8906
9061
|
[uploadImage, loadImages, deleteImage]
|
|
8907
9062
|
);
|
|
8908
|
-
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(
|
|
8909
9064
|
EmailEditorProvider,
|
|
8910
9065
|
{
|
|
8911
9066
|
initialTemplate: resolvedTemplate,
|
|
@@ -8914,7 +9069,7 @@ var EmailEditor = React62.forwardRef((props, ref) => {
|
|
|
8914
9069
|
onSave,
|
|
8915
9070
|
onChange
|
|
8916
9071
|
},
|
|
8917
|
-
/* @__PURE__ */
|
|
9072
|
+
/* @__PURE__ */ React57__default.default.createElement(
|
|
8918
9073
|
EmailEditorInternal,
|
|
8919
9074
|
{
|
|
8920
9075
|
ref,
|