@kontakto/email-template-editor 2.7.0 → 2.8.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/README.md +52 -0
- package/dist/index.cjs +758 -735
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +552 -529
- 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 React62 = require('react');
|
|
6
6
|
var zod = require('zod');
|
|
7
7
|
var server = require('react-dom/server');
|
|
8
8
|
var Handlebars = require('handlebars');
|
|
@@ -22,7 +22,7 @@ var htmlfy = require('htmlfy');
|
|
|
22
22
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
23
|
|
|
24
24
|
var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
|
|
25
|
-
var
|
|
25
|
+
var React62__default = /*#__PURE__*/_interopDefault(React62);
|
|
26
26
|
var Handlebars__default = /*#__PURE__*/_interopDefault(Handlebars);
|
|
27
27
|
var hljs__default = /*#__PURE__*/_interopDefault(hljs);
|
|
28
28
|
var jsonHighlighter__default = /*#__PURE__*/_interopDefault(jsonHighlighter);
|
|
@@ -194,8 +194,8 @@ function renderInlineMarkdownString(str) {
|
|
|
194
194
|
}
|
|
195
195
|
function EmailMarkdown(_a) {
|
|
196
196
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
197
|
-
const data =
|
|
198
|
-
return /* @__PURE__ */
|
|
197
|
+
const data = React62.useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
198
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
199
199
|
}
|
|
200
200
|
var FONT_FAMILY_SCHEMA = zod.z.enum([
|
|
201
201
|
"MODERN_SANS",
|
|
@@ -275,9 +275,9 @@ function Text({ style, props }) {
|
|
|
275
275
|
};
|
|
276
276
|
const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
|
|
277
277
|
if (props == null ? void 0 : props.markdown) {
|
|
278
|
-
return /* @__PURE__ */
|
|
278
|
+
return /* @__PURE__ */ React62__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
279
279
|
}
|
|
280
|
-
return /* @__PURE__ */
|
|
280
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wStyle }, text);
|
|
281
281
|
}
|
|
282
282
|
var PADDING_SCHEMA2 = zod.z.object({
|
|
283
283
|
top: zod.z.number(),
|
|
@@ -326,7 +326,7 @@ function Avatar({ style, props }) {
|
|
|
326
326
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
327
327
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
328
328
|
};
|
|
329
|
-
return /* @__PURE__ */
|
|
329
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React62__default.default.createElement(
|
|
330
330
|
"img",
|
|
331
331
|
{
|
|
332
332
|
alt,
|
|
@@ -478,14 +478,14 @@ function Button({ style, props }) {
|
|
|
478
478
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
479
479
|
textDecoration: "none"
|
|
480
480
|
};
|
|
481
|
-
return /* @__PURE__ */
|
|
481
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
482
482
|
"span",
|
|
483
483
|
{
|
|
484
484
|
dangerouslySetInnerHTML: {
|
|
485
485
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
|
-
), /* @__PURE__ */
|
|
488
|
+
), /* @__PURE__ */ React62__default.default.createElement("span", null, text), /* @__PURE__ */ React62__default.default.createElement(
|
|
489
489
|
"span",
|
|
490
490
|
{
|
|
491
491
|
dangerouslySetInnerHTML: {
|
|
@@ -534,7 +534,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
534
534
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
535
535
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
536
536
|
};
|
|
537
|
-
return /* @__PURE__ */
|
|
537
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React62__default.default.createElement(
|
|
538
538
|
"table",
|
|
539
539
|
{
|
|
540
540
|
align: "center",
|
|
@@ -543,7 +543,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
543
543
|
border: 0,
|
|
544
544
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
545
545
|
},
|
|
546
|
-
/* @__PURE__ */
|
|
546
|
+
/* @__PURE__ */ React62__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React62__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React62__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React62__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
|
|
547
547
|
));
|
|
548
548
|
}
|
|
549
549
|
function TableCell({ index, props, columns }) {
|
|
@@ -561,7 +561,7 @@ function TableCell({ index, props, columns }) {
|
|
|
561
561
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
562
562
|
};
|
|
563
563
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
564
|
-
return /* @__PURE__ */
|
|
564
|
+
return /* @__PURE__ */ React62__default.default.createElement("td", { style }, children);
|
|
565
565
|
}
|
|
566
566
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
567
567
|
if (index === 0) {
|
|
@@ -623,9 +623,9 @@ function Container({ style, children }) {
|
|
|
623
623
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
624
624
|
};
|
|
625
625
|
if (!children) {
|
|
626
|
-
return /* @__PURE__ */
|
|
626
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wStyle });
|
|
627
627
|
}
|
|
628
|
-
return /* @__PURE__ */
|
|
628
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wStyle }, children);
|
|
629
629
|
}
|
|
630
630
|
var container_default = Container;
|
|
631
631
|
var COLOR_SCHEMA5 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -659,7 +659,7 @@ function Divider({ style, props }) {
|
|
|
659
659
|
};
|
|
660
660
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
661
661
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
662
|
-
return /* @__PURE__ */
|
|
662
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: st }, /* @__PURE__ */ React62__default.default.createElement(
|
|
663
663
|
"hr",
|
|
664
664
|
{
|
|
665
665
|
style: {
|
|
@@ -753,15 +753,15 @@ function Heading({ props, style }) {
|
|
|
753
753
|
fontSize: getFontSize(level),
|
|
754
754
|
padding: getPadding7(style == null ? void 0 : style.padding)
|
|
755
755
|
};
|
|
756
|
-
const html2 =
|
|
756
|
+
const html2 = React62.useMemo(() => isMarkdown ? renderInlineMarkdownString(text) : null, [isMarkdown, text]);
|
|
757
757
|
const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
|
|
758
758
|
switch (level) {
|
|
759
759
|
case "h1":
|
|
760
|
-
return /* @__PURE__ */
|
|
760
|
+
return /* @__PURE__ */ React62__default.default.createElement("h1", __spreadValues({}, renderProps));
|
|
761
761
|
case "h2":
|
|
762
|
-
return /* @__PURE__ */
|
|
762
|
+
return /* @__PURE__ */ React62__default.default.createElement("h2", __spreadValues({}, renderProps));
|
|
763
763
|
case "h3":
|
|
764
|
-
return /* @__PURE__ */
|
|
764
|
+
return /* @__PURE__ */ React62__default.default.createElement("h3", __spreadValues({}, renderProps));
|
|
765
765
|
}
|
|
766
766
|
}
|
|
767
767
|
function getFontSize(level) {
|
|
@@ -843,9 +843,9 @@ function Html({ style, props }) {
|
|
|
843
843
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
844
844
|
};
|
|
845
845
|
if (!children) {
|
|
846
|
-
return /* @__PURE__ */
|
|
846
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle });
|
|
847
847
|
}
|
|
848
|
-
return /* @__PURE__ */
|
|
848
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
849
849
|
}
|
|
850
850
|
var html_default = Html;
|
|
851
851
|
var PADDING_SCHEMA9 = zod.z.object({
|
|
@@ -881,7 +881,7 @@ function Image({ style, props }) {
|
|
|
881
881
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
882
882
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
883
883
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
884
|
-
const imageElement = /* @__PURE__ */
|
|
884
|
+
const imageElement = /* @__PURE__ */ React62__default.default.createElement(
|
|
885
885
|
"img",
|
|
886
886
|
{
|
|
887
887
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -901,9 +901,9 @@ function Image({ style, props }) {
|
|
|
901
901
|
}
|
|
902
902
|
);
|
|
903
903
|
if (!linkHref) {
|
|
904
|
-
return /* @__PURE__ */
|
|
904
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: sectionStyle }, imageElement);
|
|
905
905
|
}
|
|
906
|
-
return /* @__PURE__ */
|
|
906
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React62__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
907
907
|
}
|
|
908
908
|
var image_default = Image;
|
|
909
909
|
var FONT_FAMILY_SCHEMA5 = zod.z.enum([
|
|
@@ -1049,7 +1049,7 @@ function Signature({ style, props }) {
|
|
|
1049
1049
|
color: linkColor,
|
|
1050
1050
|
textDecoration: "none"
|
|
1051
1051
|
};
|
|
1052
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
1052
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React62__default.default.createElement(
|
|
1053
1053
|
"img",
|
|
1054
1054
|
{
|
|
1055
1055
|
src: imageUrl,
|
|
@@ -1068,18 +1068,18 @@ function Signature({ style, props }) {
|
|
|
1068
1068
|
}
|
|
1069
1069
|
) : null;
|
|
1070
1070
|
const contactParts = [];
|
|
1071
|
-
if (email) contactParts.push(/* @__PURE__ */
|
|
1072
|
-
if (phone) contactParts.push(/* @__PURE__ */
|
|
1071
|
+
if (email) contactParts.push(/* @__PURE__ */ React62__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1072
|
+
if (phone) contactParts.push(/* @__PURE__ */ React62__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1073
1073
|
if (website) {
|
|
1074
1074
|
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1075
|
-
contactParts.push(/* @__PURE__ */
|
|
1075
|
+
contactParts.push(/* @__PURE__ */ React62__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1076
1076
|
}
|
|
1077
|
-
const textContent = /* @__PURE__ */
|
|
1078
|
-
const greetingElement = greeting ? /* @__PURE__ */
|
|
1077
|
+
const textContent = /* @__PURE__ */ React62__default.default.createElement("div", null, name && /* @__PURE__ */ React62__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React62__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React62__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React62__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React62__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React62__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
|
|
1078
|
+
const greetingElement = greeting ? /* @__PURE__ */ React62__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1079
1079
|
if (layout === "vertical") {
|
|
1080
|
-
return /* @__PURE__ */
|
|
1080
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React62__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1081
1081
|
}
|
|
1082
|
-
return /* @__PURE__ */
|
|
1082
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React62__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React62__default.default.createElement("tbody", null, /* @__PURE__ */ React62__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React62__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React62__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
1083
1083
|
}
|
|
1084
1084
|
var signature_default = Signature;
|
|
1085
1085
|
var SpacerPropsSchema = zod.z.object({
|
|
@@ -1096,13 +1096,13 @@ function Spacer({ props }) {
|
|
|
1096
1096
|
const style = {
|
|
1097
1097
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
1098
1098
|
};
|
|
1099
|
-
return /* @__PURE__ */
|
|
1099
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style });
|
|
1100
1100
|
}
|
|
1101
1101
|
var spacer_default = Spacer;
|
|
1102
1102
|
function buildBlockComponent(blocks) {
|
|
1103
1103
|
return function BlockComponent({ type, data }) {
|
|
1104
1104
|
const Component = blocks[type].Component;
|
|
1105
|
-
return /* @__PURE__ */
|
|
1105
|
+
return /* @__PURE__ */ React62__default.default.createElement(Component, __spreadValues({}, data));
|
|
1106
1106
|
};
|
|
1107
1107
|
}
|
|
1108
1108
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -1171,9 +1171,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
1171
1171
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
1172
1172
|
let cols = void 0;
|
|
1173
1173
|
if (columns) {
|
|
1174
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1174
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React62__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1175
1175
|
}
|
|
1176
|
-
return /* @__PURE__ */
|
|
1176
|
+
return /* @__PURE__ */ React62__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
1177
1177
|
}
|
|
1178
1178
|
var ContainerPropsSchema2 = zod.z.object({
|
|
1179
1179
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -1184,7 +1184,7 @@ var ContainerPropsSchema2 = zod.z.object({
|
|
|
1184
1184
|
function ContainerReader({ style, props }) {
|
|
1185
1185
|
var _a;
|
|
1186
1186
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
1187
|
-
return /* @__PURE__ */
|
|
1187
|
+
return /* @__PURE__ */ React62__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React62__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1188
1188
|
}
|
|
1189
1189
|
var COLOR_SCHEMA9 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1190
1190
|
var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
@@ -1257,9 +1257,9 @@ function EmailLayoutReader(props) {
|
|
|
1257
1257
|
margin: "0"
|
|
1258
1258
|
};
|
|
1259
1259
|
if (props.backdropDisabled) {
|
|
1260
|
-
return /* @__PURE__ */
|
|
1260
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React62__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1261
1261
|
}
|
|
1262
|
-
return /* @__PURE__ */
|
|
1262
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
1263
1263
|
"div",
|
|
1264
1264
|
{
|
|
1265
1265
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
@@ -1269,7 +1269,7 @@ function EmailLayoutReader(props) {
|
|
|
1269
1269
|
width: "100%"
|
|
1270
1270
|
})
|
|
1271
1271
|
},
|
|
1272
|
-
/* @__PURE__ */
|
|
1272
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
1273
1273
|
"table",
|
|
1274
1274
|
{
|
|
1275
1275
|
align: "center",
|
|
@@ -1287,19 +1287,19 @@ function EmailLayoutReader(props) {
|
|
|
1287
1287
|
cellPadding: "0",
|
|
1288
1288
|
border: 0
|
|
1289
1289
|
},
|
|
1290
|
-
/* @__PURE__ */
|
|
1290
|
+
/* @__PURE__ */ React62__default.default.createElement("tbody", null, /* @__PURE__ */ React62__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React62__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1291
1291
|
)
|
|
1292
1292
|
);
|
|
1293
1293
|
}
|
|
1294
1294
|
|
|
1295
1295
|
// src/email-builder/reader/core.tsx
|
|
1296
|
-
var ReaderContext =
|
|
1296
|
+
var ReaderContext = React62.createContext({});
|
|
1297
1297
|
function useReaderDocument() {
|
|
1298
|
-
return
|
|
1298
|
+
return React62.useContext(ReaderContext);
|
|
1299
1299
|
}
|
|
1300
1300
|
function ReaderBlock({ id }) {
|
|
1301
1301
|
const document2 = useReaderDocument();
|
|
1302
|
-
return document2[id] ? /* @__PURE__ */
|
|
1302
|
+
return document2[id] ? /* @__PURE__ */ React62__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1303
1303
|
}
|
|
1304
1304
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1305
1305
|
ColumnsContainer: {
|
|
@@ -1356,13 +1356,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1356
1356
|
var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
|
|
1357
1357
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1358
1358
|
function Reader({ document: document2, rootBlockId }) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1359
|
+
return /* @__PURE__ */ React62__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React62__default.default.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1360
1360
|
}
|
|
1361
1361
|
|
|
1362
1362
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1363
1363
|
function renderToStaticMarkup(document2, { rootBlockId, variables }) {
|
|
1364
1364
|
const html2 = "<!DOCTYPE html>" + server.renderToStaticMarkup(
|
|
1365
|
-
/* @__PURE__ */
|
|
1365
|
+
/* @__PURE__ */ React62__default.default.createElement("html", null, /* @__PURE__ */ React62__default.default.createElement("body", null, /* @__PURE__ */ React62__default.default.createElement(Reader, { document: document2, rootBlockId })))
|
|
1366
1366
|
);
|
|
1367
1367
|
if (!variables) return html2;
|
|
1368
1368
|
return evaluateHandlebars(html2, variables);
|
|
@@ -2016,13 +2016,13 @@ var THEME = styles.createTheme(BASE_THEME, {
|
|
|
2016
2016
|
var theme_default = THEME;
|
|
2017
2017
|
|
|
2018
2018
|
// src/locales/en/messages.ts
|
|
2019
|
-
var messages = JSON.parse('{"avatar.shape":["Shape"],"button.color":["Button color"],"button.style.pill":["Pill"],"button.style.rectangle":["Rectangle"],"button.style.rounded":["Rounded"],"button.width.auto":["Auto"],"button.width.full":["Full"],"canvas.desktop-view":["Desktop view"],"canvas.mobile-view":["Mobile view"],"columns.count":["Number of columns"],"columns.gap":["Columns gap"],"common.add":["Add"],"common.cancel":["Cancel"],"common.save":["Save"],"common.saving":["Saving\u2026"],"divider.color":["Color"],"drawer.library":["Library"],"drawer.new-sample":["New sample"],"drawer.new-template":["New template"],"drawer.no-samples":["No samples available"],"drawer.no-samples-match":["No samples match your filters"],"drawer.no-templates":["No saved templates yet"],"drawer.no-templates-match":["No templates match your filters"],"drawer.search-samples":["Search samples"],"drawer.search-templates":["Search templates"],"drawer.sort-by":["Sort by"],"drawer.tab.outline":["Outline"],"drawer.tab.samples":["Samples"],"drawer.tab.templates":["Templates"],"drawer.tag.all":["All"],"empty.description":["A blank email template to start from scratch"],"empty.slug":["Empty email"],"field.content":["Content"],"field.height":["Height"],"field.level":["Level"],"field.markdown":["Markdown"],"field.size":["Size"],"field.style":["Style"],"field.text":["Text"],"field.url":["Url"],"field.width":["Width"],"global.backdrop-color":["Backdrop color"],"global.canvas-border-color":["Canvas border color"],"global.canvas-border-radius":["Canvas border radius"],"global.canvas-color":["Canvas color"],"global.disable-backdrop":["Disable backdrop"],"image.alt-text":["Alt text"],"image.http-warning":["Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery."],"image.library":["Library"],"image.link-href":["Click through URL"],"image.source-url":["Source URL"],"image.upload":["Upload"],"image.uploading":["Uploading\u2026"],"inspector.tab.inspect":["Inspect"],"inspector.tab.settings":["Settings"],"inspector.tab.styles":["Styles"],"inspector.tab.variables":["Variables"],"panel.avatar-block":["Avatar block"],"panel.button-block":["Button block"],"panel.columns-block":["Columns block"],"panel.container-block":["Container block"],"panel.divider-block":["Divider block"],"panel.editor-appearance":["Editor appearance"],"panel.export":["Export"],"panel.global":["Global"],"panel.heading-block":["Heading block"],"panel.html-block":["HTML block"],"panel.image-block":["Image block"],"panel.signature-block":["Signature block"],"panel.spacer-block":["Spacer block"],"panel.template":["Template"],"panel.text-block":["Text block"],"picker.blank-desc":["Start from an empty email"],"picker.blank-title":["Blank"],"picker.create-sample":["Create sample"],"picker.create-template":["Create template"],"picker.creating":["Creating\u2026"],"picker.error-name-required":["Name is required"],"picker.error-sample-taken":["A sample with this name already exists"],"picker.error-template-taken":["A template with this name already exists"],"picker.start-from":["Start from"],"picker.title-sample":["New sample"],"picker.title-template":["New template"],"rename.error-empty":["Please enter a name"],"rename.error-generic":["Failed to update template details"],"rename.error-taken":["A template with this name already exists"],"rename.name-label":["Name"],"rename.no-tags":["No tags yet."],"rename.tag-placeholder":["Add a tag and press Enter"],"rename.tags":["Tags"],"rename.title":["Edit details"],"row.actions":["Row actions"],"row.demote":["Demote to template"],"row.duplicate":["Duplicate"],"row.duplicate-as-template":["Duplicate as template"],"row.edit-details":["Edit name & tags\u2026"],"row.more":["More"],"row.promote":["Promote to sample"],"save-dialog.create":["Create"],"save-dialog.error-empty-name":["Please enter a template name"],"save-dialog.name-label":["Template Name"],"save-dialog.save":["Save"],"save-dialog.saving":["Saving..."],"save-dialog.title":["Save as a new template"],"save-dialog.title-new":["Create a new template"],"savebar.error-saving":["Error saving"],"savebar.new":["New"],"savebar.new-template-created":["New template created"],"savebar.sample-prefix":["Sample"],"savebar.sample-saved":["Sample saved"],"savebar.save":["Save"],"savebar.save-as":["Save as\u2026"],"savebar.save-as-new":["Save as new\u2026"],"savebar.save-as-new-template":["Save as a new template"],"savebar.save-changes":["Save changes"],"savebar.save-changes-to-sample":["Save changes to this sample"],"savebar.start-fresh":["Start a fresh template"],"savebar.template-saved":["Template saved"],"signature.address":["Address"],"signature.company":["Company"],"signature.email":["Email"],"signature.greeting":["Greeting"],"signature.image-shape":["Image shape"],"signature.image-size":["Image size"],"signature.image-url":["Image URL"],"signature.layout":["Layout"],"signature.layout.horizontal":["Horizontal"],"signature.layout.vertical":["Vertical"],"signature.link-color":["Link color"],"signature.name":["Name"],"signature.name-color":["Name color"],"signature.phone":["Phone"],"signature.shape.circle":["Circle"],"signature.shape.rounded":["Rounded"],"signature.shape.square":["Square"],"signature.title":["Title"],"signature.website":["Website"],"size.lg":["Lg"],"size.md":["Md"],"size.sm":["Sm"],"size.xs":["Xs"],"sort.last-updated":["Last updated"],"sort.name":["Name (A\u2013Z)"],"sort.recently-created":["Recently created"],"style.alignment":["Alignment"],"style.background-color":["Background color"],"style.border-color":["Border color"],"style.border-radius":["Border radius"],"style.font-family":["Font family"],"style.font-size":["Font size"],"style.font-weight":["Font weight"],"style.letter-spacing":["Letter spacing"],"style.line-height":["Line height"],"style.padding":["Padding"],"style.text-color":["Text color"],"tab.edit":["Edit"],"tab.html-output":["HTML output"],"tab.json-output":["JSON output"],"tab.preview":["Preview"],"tab.text-output":["Plain text output"],"time.days-short":["d ago"],"time.hours-short":["h ago"],"time.just-now":["just now"],"time.minutes-short":["m ago"],"time.months-short":["mo ago"],"time.years-short":["y ago"],"toolbar.bold":["Bold"],"toolbar.bold-shortcut":["Bold (Cmd+B)"],"toolbar.italic":["Italic"],"toolbar.italic-shortcut":["Italic (Cmd+I)"],"toolbar.link":["Link"],"toolbar.link-shortcut":["Link (Cmd+K)"],"tune.copy":["Copy block"],"tune.delete":["Delete"],"tune.move-down":["Move down"],"tune.move-up":["Move up"]}');
|
|
2019
|
+
var messages = JSON.parse('{"avatar.shape":["Shape"],"block-add.avatar":["Avatar"],"block-add.button":["Button"],"block-add.columns":["Columns"],"block-add.company-signature":["Company Signature"],"block-add.container":["Container"],"block-add.divider":["Divider"],"block-add.heading":["Heading"],"block-add.html":["Html"],"block-add.image":["Image"],"block-add.personal-signature":["Personal Signature"],"block-add.spacer":["Spacer"],"block-add.text":["Text"],"button.color":["Button color"],"button.style.pill":["Pill"],"button.style.rectangle":["Rectangle"],"button.style.rounded":["Rounded"],"button.width.auto":["Auto"],"button.width.full":["Full"],"canvas.desktop-view":["Desktop view"],"canvas.mobile-view":["Mobile view"],"columns.count":["Number of columns"],"columns.gap":["Columns gap"],"common.add":["Add"],"common.cancel":["Cancel"],"common.save":["Save"],"common.saving":["Saving\u2026"],"divider.color":["Color"],"drawer.library":["Library"],"drawer.new-sample":["New sample"],"drawer.new-template":["New template"],"drawer.no-samples":["No samples available"],"drawer.no-samples-match":["No samples match your filters"],"drawer.no-templates":["No saved templates yet"],"drawer.no-templates-match":["No templates match your filters"],"drawer.search-samples":["Search samples"],"drawer.search-templates":["Search templates"],"drawer.sort-by":["Sort by"],"drawer.tab.outline":["Outline"],"drawer.tab.samples":["Samples"],"drawer.tab.templates":["Templates"],"drawer.tag.all":["All"],"empty.description":["A blank email template to start from scratch"],"empty.slug":["Empty email"],"field.content":["Content"],"field.height":["Height"],"field.level":["Level"],"field.markdown":["Markdown"],"field.size":["Size"],"field.style":["Style"],"field.text":["Text"],"field.url":["Url"],"field.width":["Width"],"global.backdrop-color":["Backdrop color"],"global.canvas-border-color":["Canvas border color"],"global.canvas-border-radius":["Canvas border radius"],"global.canvas-color":["Canvas color"],"global.disable-backdrop":["Disable backdrop"],"image.alt-text":["Alt text"],"image.http-warning":["Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery."],"image.library":["Library"],"image.link-href":["Click through URL"],"image.source-url":["Source URL"],"image.upload":["Upload"],"image.uploading":["Uploading\u2026"],"inspect.hint":["Click on a block to inspect."],"inspect.not-found":["Block not found. Click on a block to reset."],"inspector.tab.inspect":["Inspect"],"inspector.tab.settings":["Settings"],"inspector.tab.styles":["Styles"],"inspector.tab.variables":["Variables"],"outline.canvas":["Canvas"],"outline.hint":["Click a row to select. Drag a row to reorder or move it into a container."],"outline.title":["Outline"],"panel.avatar-block":["Avatar block"],"panel.button-block":["Button block"],"panel.columns-block":["Columns block"],"panel.container-block":["Container block"],"panel.details":["Details"],"panel.divider-block":["Divider block"],"panel.editor-appearance":["Editor appearance"],"panel.export":["Export"],"panel.global":["Global"],"panel.heading-block":["Heading block"],"panel.html-block":["HTML block"],"panel.image-block":["Image block"],"panel.signature-block":["Signature block"],"panel.spacer-block":["Spacer block"],"panel.template":["Template"],"panel.text-block":["Text block"],"picker.blank-desc":["Start from an empty email"],"picker.blank-title":["Blank"],"picker.create-sample":["Create sample"],"picker.create-template":["Create template"],"picker.creating":["Creating\u2026"],"picker.error-name-required":["Name is required"],"picker.error-sample-taken":["A sample with this name already exists"],"picker.error-template-taken":["A template with this name already exists"],"picker.start-from":["Start from"],"picker.title-sample":["New sample"],"picker.title-template":["New template"],"redo.label":["Redo"],"redo.tooltip":["Redo"],"rename.add-tag":["Add a tag"],"rename.error-empty":["Please enter a name"],"rename.error-generic":["Failed to update template details"],"rename.error-taken":["A template with this name already exists"],"rename.name-label":["Name"],"rename.no-tags":["No tags yet."],"rename.tag-placeholder":["Add a tag and press Enter"],"rename.tags":["Tags"],"rename.title":["Edit details"],"row.actions":["Row actions"],"row.demote":["Demote to template"],"row.duplicate":["Duplicate"],"row.duplicate-as-template":["Duplicate as template"],"row.edit-details":["Edit name & tags\u2026"],"row.more":["More"],"row.promote":["Promote to sample"],"save-dialog.create":["Create"],"save-dialog.error-empty-name":["Please enter a template name"],"save-dialog.name-label":["Template Name"],"save-dialog.save":["Save"],"save-dialog.saving":["Saving..."],"save-dialog.title":["Save as a new template"],"save-dialog.title-new":["Create a new template"],"savebar.error-saving":["Error saving"],"savebar.new":["New"],"savebar.new-template-created":["New template created"],"savebar.sample-prefix":["Sample"],"savebar.sample-saved":["Sample saved"],"savebar.save":["Save"],"savebar.save-as":["Save as\u2026"],"savebar.save-as-new":["Save as new\u2026"],"savebar.save-as-new-template":["Save as a new template"],"savebar.save-changes":["Save changes"],"savebar.save-changes-to-sample":["Save changes to this sample"],"savebar.start-fresh":["Start a fresh template"],"savebar.template-saved":["Template saved"],"settings.checkerboard":["Checkerboard"],"settings.copied":["Template copied successfully!"],"settings.delete":["Delete Template"],"settings.delete-confirm":["Are you sure you want to delete this template?"],"settings.editor-only-hint":["Editor-only \u2014 never reaches the rendered email."],"settings.no-rename-cb":["Wire a renameTemplate callback to enable editing from here"],"settings.no-template":["No template selected"],"settings.save-as-sample":["Save as Sample Template"],"settings.save-details":["Save details"],"settings.save-disabled":["Save functionality is disabled. To enable saving, provide the necessary callback functions."],"settings.saved":["Saved"],"settings.solid":["Solid"],"settings.workspace-background":["Workspace background"],"signature.address":["Address"],"signature.company":["Company"],"signature.email":["Email"],"signature.greeting":["Greeting"],"signature.image-shape":["Image shape"],"signature.image-size":["Image size"],"signature.image-url":["Image URL"],"signature.layout":["Layout"],"signature.layout.horizontal":["Horizontal"],"signature.layout.vertical":["Vertical"],"signature.link-color":["Link color"],"signature.name":["Name"],"signature.name-color":["Name color"],"signature.phone":["Phone"],"signature.shape.circle":["Circle"],"signature.shape.rounded":["Rounded"],"signature.shape.square":["Square"],"signature.title":["Title"],"signature.website":["Website"],"size.lg":["Lg"],"size.md":["Md"],"size.sm":["Sm"],"size.xs":["Xs"],"sort.last-updated":["Last updated"],"sort.name":["Name (A\u2013Z)"],"sort.recently-created":["Recently created"],"style.alignment":["Alignment"],"style.background-color":["Background color"],"style.border-color":["Border color"],"style.border-radius":["Border radius"],"style.font-family":["Font family"],"style.font-size":["Font size"],"style.font-weight":["Font weight"],"style.letter-spacing":["Letter spacing"],"style.line-height":["Line height"],"style.padding":["Padding"],"style.text-color":["Text color"],"tab.edit":["Edit"],"tab.html-output":["HTML output"],"tab.json-output":["JSON output"],"tab.preview":["Preview"],"tab.text-output":["Plain text output"],"tag.marketing":["marketing"],"tag.transactional":["transactional"],"time.days-short":["d ago"],"time.hours-short":["h ago"],"time.just-now":["just now"],"time.minutes-short":["m ago"],"time.months-short":["mo ago"],"time.years-short":["y ago"],"toolbar.bold":["Bold"],"toolbar.bold-shortcut":["Bold (Cmd+B)"],"toolbar.italic":["Italic"],"toolbar.italic-shortcut":["Italic (Cmd+I)"],"toolbar.link":["Link"],"toolbar.link-shortcut":["Link (Cmd+K)"],"tune.copy":["Copy block"],"tune.delete":["Delete"],"tune.move-down":["Move down"],"tune.move-up":["Move up"],"undo.label":["Undo"],"undo.tooltip":["Undo"]}');
|
|
2020
2020
|
|
|
2021
2021
|
// src/locales/fi/messages.ts
|
|
2022
|
-
var messages2 = JSON.parse('{"avatar.shape":["Muoto"],"button.color":["Painikkeen v\xE4ri"],"button.style.pill":["Pilleri"],"button.style.rectangle":["Suorakaide"],"button.style.rounded":["Py\xF6ristetty"],"button.width.auto":["Automaattinen"],"button.width.full":["T\xE4ysi"],"canvas.desktop-view":["Ty\xF6p\xF6yt\xE4n\xE4kym\xE4"],"canvas.mobile-view":["Mobiilin\xE4kym\xE4"],"columns.count":["Sarakkeiden m\xE4\xE4r\xE4"],"columns.gap":["Sarakev\xE4li"],"common.add":["Lis\xE4\xE4"],"common.cancel":["Peruuta"],"common.save":["Tallenna"],"common.saving":["Tallennetaan\u2026"],"divider.color":["V\xE4ri"],"drawer.library":["Kirjasto"],"drawer.new-sample":["Uusi malli"],"drawer.new-template":["Uusi pohja"],"drawer.no-samples":["Ei malleja saatavilla"],"drawer.no-samples-match":["Mik\xE4\xE4n malli ei vastaa hakua"],"drawer.no-templates":["Ei tallennettuja pohjia"],"drawer.no-templates-match":["Mik\xE4\xE4n pohja ei vastaa hakua"],"drawer.search-samples":["Etsi malleja"],"drawer.search-templates":["Etsi pohjia"],"drawer.sort-by":["J\xE4rjestys"],"drawer.tab.outline":["Rakenne"],"drawer.tab.samples":["Mallit"],"drawer.tab.templates":["Pohjat"],"drawer.tag.all":["Kaikki"],"empty.description":["Tyhj\xE4 s\xE4hk\xF6postipohja, aloita tyhj\xE4lt\xE4 p\xF6yd\xE4lt\xE4"],"empty.slug":["Tyhj\xE4 s\xE4hk\xF6posti"],"field.content":["Sis\xE4lt\xF6"],"field.height":["Korkeus"],"field.level":["Taso"],"field.markdown":["Markdown"],"field.size":["Koko"],"field.style":["Tyyli"],"field.text":["Teksti"],"field.url":["Osoite"],"field.width":["Leveys"],"global.backdrop-color":["Taustav\xE4ri"],"global.canvas-border-color":["Kankaan reunan v\xE4ri"],"global.canvas-border-radius":["Kankaan reunan py\xF6ristys"],"global.canvas-color":["Kankaan v\xE4ri"],"global.disable-backdrop":["Piilota taustav\xE4ri"],"image.alt-text":["Vaihtoehtoinen teksti"],"image.http-warning":["Ei-HTTPS-osoite: Gmail ja muut asiakasohjelmat poistavat sekoitetun sis\xE4ll\xF6n. K\xE4yt\xE4 https:// varmaa toimitusta varten."],"image.library":["Kirjasto"],"image.link-href":["Linkin osoite"],"image.source-url":["L\xE4hdeosoite"],"image.upload":["Lataa"],"image.uploading":["Ladataan\u2026"],"inspector.tab.inspect":["Tarkastele"],"inspector.tab.settings":["Asetukset"],"inspector.tab.styles":["Tyylit"],"inspector.tab.variables":["Muuttujat"],"panel.avatar-block":["Avatarlohko"],"panel.button-block":["Painikelohko"],"panel.columns-block":["Sarakkeet"],"panel.container-block":["S\xE4ili\xF6lohko"],"panel.divider-block":["Erotin"],"panel.editor-appearance":["Editorin ulkoasu"],"panel.export":["Vienti"],"panel.global":["Yleiset"],"panel.heading-block":["Otsikkolohko"],"panel.html-block":["HTML-lohko"],"panel.image-block":["Kuvalohko"],"panel.signature-block":["Allekirjoituslohko"],"panel.spacer-block":["V\xE4lilohko"],"panel.template":["Pohja"],"panel.text-block":["Tekstilohko"],"picker.blank-desc":["Aloita tyhj\xE4st\xE4 s\xE4hk\xF6postista"],"picker.blank-title":["Tyhj\xE4"],"picker.create-sample":["Luo malli"],"picker.create-template":["Luo pohja"],"picker.creating":["Luodaan\u2026"],"picker.error-name-required":["Nimi vaaditaan"],"picker.error-sample-taken":["Samanniminen malli on jo olemassa"],"picker.error-template-taken":["Samanniminen pohja on jo olemassa"],"picker.start-from":["Aloitetaan pohjasta"],"picker.title-sample":["Uusi malli"],"picker.title-template":["Uusi pohja"],"rename.error-empty":["Anna nimi"],"rename.error-generic":["Tietojen p\xE4ivitys ep\xE4onnistui"],"rename.error-taken":["Samanniminen pohja on jo olemassa"],"rename.name-label":["Nimi"],"rename.no-tags":["Ei tunnisteita."],"rename.tag-placeholder":["Lis\xE4\xE4 tunniste ja paina Enter"],"rename.tags":["Tunnisteet"],"rename.title":["Muokkaa tietoja"],"row.actions":["Rivin toiminnot"],"row.demote":["Alenna pohjaksi"],"row.duplicate":["Monista"],"row.duplicate-as-template":["Monista pohjaksi"],"row.edit-details":["Muokkaa nime\xE4 ja tunnisteita\u2026"],"row.more":["Lis\xE4\xE4"],"row.promote":["Ylenn\xE4 malliksi"],"save-dialog.create":["Luo"],"save-dialog.error-empty-name":["Anna pohjalle nimi"],"save-dialog.name-label":["Pohjan nimi"],"save-dialog.save":["Tallenna"],"save-dialog.saving":["Tallennetaan..."],"save-dialog.title":["Tallenna uutena pohjana"],"save-dialog.title-new":["Luo uusi pohja"],"savebar.error-saving":["Tallennus ep\xE4onnistui"],"savebar.new":["Uusi"],"savebar.new-template-created":["Uusi pohja luotu"],"savebar.sample-prefix":["Malli"],"savebar.sample-saved":["Malli tallennettu"],"savebar.save":["Tallenna"],"savebar.save-as":["Tallenna nimell\xE4\u2026"],"savebar.save-as-new":["Tallenna uutena\u2026"],"savebar.save-as-new-template":["Tallenna uutena pohjana"],"savebar.save-changes":["Tallenna muutokset"],"savebar.save-changes-to-sample":["Tallenna muutokset t\xE4h\xE4n malliin"],"savebar.start-fresh":["Aloita tyhj\xE4st\xE4 pohjasta"],"savebar.template-saved":["Pohja tallennettu"],"signature.address":["Osoite"],"signature.company":["Yritys"],"signature.email":["S\xE4hk\xF6posti"],"signature.greeting":["Tervehdys"],"signature.image-shape":["Kuvan muoto"],"signature.image-size":["Kuvan koko"],"signature.image-url":["Kuvan osoite"],"signature.layout":["Asettelu"],"signature.layout.horizontal":["Vaakasuora"],"signature.layout.vertical":["Pystysuora"],"signature.link-color":["Linkin v\xE4ri"],"signature.name":["Nimi"],"signature.name-color":["Nimen v\xE4ri"],"signature.phone":["Puhelin"],"signature.shape.circle":["Ympyr\xE4"],"signature.shape.rounded":["Py\xF6ristetty"],"signature.shape.square":["Neli\xF6"],"signature.title":["Titteli"],"signature.website":["Verkkosivusto"],"size.lg":["Lg"],"size.md":["Md"],"size.sm":["Sm"],"size.xs":["Xs"],"sort.last-updated":["Viimeksi p\xE4ivitetty"],"sort.name":["Nimi (A\u2013\xD6)"],"sort.recently-created":["\xC4skett\xE4in luotu"],"style.alignment":["Tasaus"],"style.background-color":["Taustav\xE4ri"],"style.border-color":["Reunan v\xE4ri"],"style.border-radius":["Reunan py\xF6ristys"],"style.font-family":["Fontti"],"style.font-size":["Fonttikoko"],"style.font-weight":["Fontin paksuus"],"style.letter-spacing":["Kirjainv\xE4li"],"style.line-height":["Rivikorkeus"],"style.padding":["T\xE4yte"],"style.text-color":["Tekstin v\xE4ri"],"tab.edit":["Muokkaa"],"tab.html-output":["HTML-tuloste"],"tab.json-output":["JSON-tuloste"],"tab.preview":["Esikatselu"],"tab.text-output":["Tekstituloste"],"time.days-short":[" pv sitten"],"time.hours-short":[" h sitten"],"time.just-now":["juuri nyt"],"time.minutes-short":[" min sitten"],"time.months-short":[" kk sitten"],"time.years-short":[" v sitten"],"toolbar.bold":["Lihavointi"],"toolbar.bold-shortcut":["Lihavointi (Cmd+B)"],"toolbar.italic":["Kursivointi"],"toolbar.italic-shortcut":["Kursivointi (Cmd+I)"],"toolbar.link":["Linkki"],"toolbar.link-shortcut":["Linkki (Cmd+K)"],"tune.copy":["Kopioi lohko"],"tune.delete":["Poista"],"tune.move-down":["Siirr\xE4 alas"],"tune.move-up":["Siirr\xE4 yl\xF6s"]}');
|
|
2022
|
+
var messages2 = JSON.parse('{"avatar.shape":["Muoto"],"block-add.avatar":["Avatar"],"block-add.button":["Painike"],"block-add.columns":["Sarakkeet"],"block-add.company-signature":["Yritysallekirjoitus"],"block-add.container":["S\xE4ili\xF6"],"block-add.divider":["Erotin"],"block-add.heading":["Otsikko"],"block-add.html":["HTML"],"block-add.image":["Kuva"],"block-add.personal-signature":["Henkil\xF6kohtainen allekirjoitus"],"block-add.spacer":["V\xE4li"],"block-add.text":["Teksti"],"button.color":["Painikkeen v\xE4ri"],"button.style.pill":["Pilleri"],"button.style.rectangle":["Suorakaide"],"button.style.rounded":["Py\xF6ristetty"],"button.width.auto":["Automaattinen"],"button.width.full":["T\xE4ysi"],"canvas.desktop-view":["Ty\xF6p\xF6yt\xE4n\xE4kym\xE4"],"canvas.mobile-view":["Mobiilin\xE4kym\xE4"],"columns.count":["Sarakkeiden m\xE4\xE4r\xE4"],"columns.gap":["Sarakev\xE4li"],"common.add":["Lis\xE4\xE4"],"common.cancel":["Peruuta"],"common.save":["Tallenna"],"common.saving":["Tallennetaan\u2026"],"divider.color":["V\xE4ri"],"drawer.library":["Kirjasto"],"drawer.new-sample":["Uusi malli"],"drawer.new-template":["Uusi pohja"],"drawer.no-samples":["Ei malleja saatavilla"],"drawer.no-samples-match":["Mik\xE4\xE4n malli ei vastaa hakua"],"drawer.no-templates":["Ei tallennettuja pohjia"],"drawer.no-templates-match":["Mik\xE4\xE4n pohja ei vastaa hakua"],"drawer.search-samples":["Etsi malleja"],"drawer.search-templates":["Etsi pohjia"],"drawer.sort-by":["J\xE4rjestys"],"drawer.tab.outline":["Rakenne"],"drawer.tab.samples":["Mallit"],"drawer.tab.templates":["Pohjat"],"drawer.tag.all":["Kaikki"],"empty.description":["Tyhj\xE4 s\xE4hk\xF6postipohja, aloita tyhj\xE4lt\xE4 p\xF6yd\xE4lt\xE4"],"empty.slug":["Tyhj\xE4 s\xE4hk\xF6posti"],"field.content":["Sis\xE4lt\xF6"],"field.height":["Korkeus"],"field.level":["Taso"],"field.markdown":["Markdown"],"field.size":["Koko"],"field.style":["Tyyli"],"field.text":["Teksti"],"field.url":["Osoite"],"field.width":["Leveys"],"global.backdrop-color":["Taustav\xE4ri"],"global.canvas-border-color":["Kankaan reunan v\xE4ri"],"global.canvas-border-radius":["Kankaan reunan py\xF6ristys"],"global.canvas-color":["Kankaan v\xE4ri"],"global.disable-backdrop":["Piilota taustav\xE4ri"],"image.alt-text":["Vaihtoehtoinen teksti"],"image.http-warning":["Ei-HTTPS-osoite: Gmail ja muut asiakasohjelmat poistavat sekoitetun sis\xE4ll\xF6n. K\xE4yt\xE4 https:// varmaa toimitusta varten."],"image.library":["Kirjasto"],"image.link-href":["Linkin osoite"],"image.source-url":["L\xE4hdeosoite"],"image.upload":["Lataa"],"image.uploading":["Ladataan\u2026"],"inspect.hint":["Valitse lohko napsauttamalla."],"inspect.not-found":["Lohkoa ei l\xF6ytynyt. Palaa napsauttamalla toista lohkoa."],"inspector.tab.inspect":["Tarkastele"],"inspector.tab.settings":["Asetukset"],"inspector.tab.styles":["Tyylit"],"inspector.tab.variables":["Muuttujat"],"outline.canvas":["Kangas"],"outline.hint":["Valitse rivi napsauttamalla. Raahaa rivi\xE4 j\xE4rjestyksen muuttamiseksi tai siirr\xE4 se s\xE4ili\xF6\xF6n."],"outline.title":["Rakenne"],"panel.avatar-block":["Avatarlohko"],"panel.button-block":["Painikelohko"],"panel.columns-block":["Sarakkeet"],"panel.container-block":["S\xE4ili\xF6lohko"],"panel.details":["Tiedot"],"panel.divider-block":["Erotin"],"panel.editor-appearance":["Editorin ulkoasu"],"panel.export":["Vienti"],"panel.global":["Yleiset"],"panel.heading-block":["Otsikkolohko"],"panel.html-block":["HTML-lohko"],"panel.image-block":["Kuvalohko"],"panel.signature-block":["Allekirjoituslohko"],"panel.spacer-block":["V\xE4lilohko"],"panel.template":["Pohja"],"panel.text-block":["Tekstilohko"],"picker.blank-desc":["Aloita tyhj\xE4st\xE4 s\xE4hk\xF6postista"],"picker.blank-title":["Tyhj\xE4"],"picker.create-sample":["Luo malli"],"picker.create-template":["Luo pohja"],"picker.creating":["Luodaan\u2026"],"picker.error-name-required":["Nimi vaaditaan"],"picker.error-sample-taken":["Samanniminen malli on jo olemassa"],"picker.error-template-taken":["Samanniminen pohja on jo olemassa"],"picker.start-from":["Aloitetaan pohjasta"],"picker.title-sample":["Uusi malli"],"picker.title-template":["Uusi pohja"],"redo.label":["Tee uudelleen"],"redo.tooltip":["Tee uudelleen"],"rename.add-tag":["Lis\xE4\xE4 tunniste"],"rename.error-empty":["Anna nimi"],"rename.error-generic":["Tietojen p\xE4ivitys ep\xE4onnistui"],"rename.error-taken":["Samanniminen pohja on jo olemassa"],"rename.name-label":["Nimi"],"rename.no-tags":["Ei tunnisteita."],"rename.tag-placeholder":["Lis\xE4\xE4 tunniste ja paina Enter"],"rename.tags":["Tunnisteet"],"rename.title":["Muokkaa tietoja"],"row.actions":["Rivin toiminnot"],"row.demote":["Alenna pohjaksi"],"row.duplicate":["Monista"],"row.duplicate-as-template":["Monista pohjaksi"],"row.edit-details":["Muokkaa nime\xE4 ja tunnisteita\u2026"],"row.more":["Lis\xE4\xE4"],"row.promote":["Ylenn\xE4 malliksi"],"save-dialog.create":["Luo"],"save-dialog.error-empty-name":["Anna pohjalle nimi"],"save-dialog.name-label":["Pohjan nimi"],"save-dialog.save":["Tallenna"],"save-dialog.saving":["Tallennetaan..."],"save-dialog.title":["Tallenna uutena pohjana"],"save-dialog.title-new":["Luo uusi pohja"],"savebar.error-saving":["Tallennus ep\xE4onnistui"],"savebar.new":["Uusi"],"savebar.new-template-created":["Uusi pohja luotu"],"savebar.sample-prefix":["Malli"],"savebar.sample-saved":["Malli tallennettu"],"savebar.save":["Tallenna"],"savebar.save-as":["Tallenna nimell\xE4\u2026"],"savebar.save-as-new":["Tallenna uutena\u2026"],"savebar.save-as-new-template":["Tallenna uutena pohjana"],"savebar.save-changes":["Tallenna muutokset"],"savebar.save-changes-to-sample":["Tallenna muutokset t\xE4h\xE4n malliin"],"savebar.start-fresh":["Aloita tyhj\xE4st\xE4 pohjasta"],"savebar.template-saved":["Pohja tallennettu"],"settings.checkerboard":["Shakkikuvio"],"settings.copied":["Pohja kopioitu!"],"settings.delete":["Poista pohja"],"settings.delete-confirm":["Haluatko varmasti poistaa t\xE4m\xE4n pohjan?"],"settings.editor-only-hint":["N\xE4kyy vain editorissa \u2014 ei p\xE4\xE4dy l\xE4hetett\xE4v\xE4\xE4n viestiin."],"settings.no-rename-cb":["Anna renameTemplate-callback k\xE4ytt\xF6\xF6n, niin voit muokata t\xE4st\xE4"],"settings.no-template":["Pohjaa ei ole valittu"],"settings.save-as-sample":["Tallenna mallipohjaksi"],"settings.save-details":["Tallenna tiedot"],"settings.save-disabled":["Tallennus on poistettu k\xE4yt\xF6st\xE4. Ota k\xE4ytt\xF6\xF6n antamalla tarvittavat callback-funktiot."],"settings.saved":["Tallennettu"],"settings.solid":["Yksiv\xE4rinen"],"settings.workspace-background":["Ty\xF6tilan tausta"],"signature.address":["Osoite"],"signature.company":["Yritys"],"signature.email":["S\xE4hk\xF6posti"],"signature.greeting":["Tervehdys"],"signature.image-shape":["Kuvan muoto"],"signature.image-size":["Kuvan koko"],"signature.image-url":["Kuvan osoite"],"signature.layout":["Asettelu"],"signature.layout.horizontal":["Vaakasuora"],"signature.layout.vertical":["Pystysuora"],"signature.link-color":["Linkin v\xE4ri"],"signature.name":["Nimi"],"signature.name-color":["Nimen v\xE4ri"],"signature.phone":["Puhelin"],"signature.shape.circle":["Ympyr\xE4"],"signature.shape.rounded":["Py\xF6ristetty"],"signature.shape.square":["Neli\xF6"],"signature.title":["Titteli"],"signature.website":["Verkkosivusto"],"size.lg":["Lg"],"size.md":["Md"],"size.sm":["Sm"],"size.xs":["Xs"],"sort.last-updated":["Viimeksi p\xE4ivitetty"],"sort.name":["Nimi (A\u2013\xD6)"],"sort.recently-created":["\xC4skett\xE4in luotu"],"style.alignment":["Tasaus"],"style.background-color":["Taustav\xE4ri"],"style.border-color":["Reunan v\xE4ri"],"style.border-radius":["Reunan py\xF6ristys"],"style.font-family":["Fontti"],"style.font-size":["Fonttikoko"],"style.font-weight":["Fontin paksuus"],"style.letter-spacing":["Kirjainv\xE4li"],"style.line-height":["Rivikorkeus"],"style.padding":["T\xE4yte"],"style.text-color":["Tekstin v\xE4ri"],"tab.edit":["Muokkaa"],"tab.html-output":["HTML-tuloste"],"tab.json-output":["JSON-tuloste"],"tab.preview":["Esikatselu"],"tab.text-output":["Tekstituloste"],"tag.marketing":["markkinointi"],"tag.transactional":["tapahtumaviestit"],"time.days-short":[" pv sitten"],"time.hours-short":[" h sitten"],"time.just-now":["juuri nyt"],"time.minutes-short":[" min sitten"],"time.months-short":[" kk sitten"],"time.years-short":[" v sitten"],"toolbar.bold":["Lihavointi"],"toolbar.bold-shortcut":["Lihavointi (Cmd+B)"],"toolbar.italic":["Kursivointi"],"toolbar.italic-shortcut":["Kursivointi (Cmd+I)"],"toolbar.link":["Linkki"],"toolbar.link-shortcut":["Linkki (Cmd+K)"],"tune.copy":["Kopioi lohko"],"tune.delete":["Poista"],"tune.move-down":["Siirr\xE4 alas"],"tune.move-up":["Siirr\xE4 yl\xF6s"],"undo.label":["Kumoa"],"undo.tooltip":["Kumoa"]}');
|
|
2023
2023
|
|
|
2024
2024
|
// src/locales/sv/messages.ts
|
|
2025
|
-
var messages3 = JSON.parse('{"avatar.shape":["Form"],"button.color":["Knappf\xE4rg"],"button.style.pill":["Piller"],"button.style.rectangle":["Rektangel"],"button.style.rounded":["Rundad"],"button.width.auto":["Auto"],"button.width.full":["Full"],"canvas.desktop-view":["Skrivbordsvy"],"canvas.mobile-view":["Mobilvy"],"columns.count":["Antal kolumner"],"columns.gap":["Kolumnmellanrum"],"common.add":["L\xE4gg till"],"common.cancel":["Avbryt"],"common.save":["Spara"],"common.saving":["Sparar\u2026"],"divider.color":["F\xE4rg"],"drawer.library":["Bibliotek"],"drawer.new-sample":["Ny mall"],"drawer.new-template":["Ny e-postmall"],"drawer.no-samples":["Inga exempel tillg\xE4ngliga"],"drawer.no-samples-match":["Inga exempel matchar dina filter"],"drawer.no-templates":["Inga sparade mallar \xE4nnu"],"drawer.no-templates-match":["Inga mallar matchar dina filter"],"drawer.search-samples":["S\xF6k exempel"],"drawer.search-templates":["S\xF6k mallar"],"drawer.sort-by":["Sortera efter"],"drawer.tab.outline":["Struktur"],"drawer.tab.samples":["Exempel"],"drawer.tab.templates":["Mallar"],"drawer.tag.all":["Alla"],"empty.description":["En tom e-postmall att utg\xE5 fr\xE5n"],"empty.slug":["Tomt e-postmeddelande"],"field.content":["Inneh\xE5ll"],"field.height":["H\xF6jd"],"field.level":["Niv\xE5"],"field.markdown":["Markdown"],"field.size":["Storlek"],"field.style":["Stil"],"field.text":["Text"],"field.url":["Adress"],"field.width":["Bredd"],"global.backdrop-color":["Bakgrundsf\xE4rg"],"global.canvas-border-color":["Canvaskantf\xE4rg"],"global.canvas-border-radius":["Canvaskantradie"],"global.canvas-color":["Canvasf\xE4rg"],"global.disable-backdrop":["D\xF6lj bakgrund"],"image.alt-text":["Alternativ text"],"image.http-warning":["Icke-HTTPS-URL: Gmail och andra klienter tar bort blandat inneh\xE5ll. Anv\xE4nd https:// f\xF6r p\xE5litlig leverans."],"image.library":["Bibliotek"],"image.link-href":["Klickl\xE4nk"],"image.source-url":["K\xE4lladress"],"image.upload":["Ladda upp"],"image.uploading":["Laddar upp\u2026"],"inspector.tab.inspect":["Inspektera"],"inspector.tab.settings":["Inst\xE4llningar"],"inspector.tab.styles":["Stilar"],"inspector.tab.variables":["Variabler"],"panel.avatar-block":["Avatarblock"],"panel.button-block":["Knappblock"],"panel.columns-block":["Kolumner"],"panel.container-block":["Beh\xE5llarblock"],"panel.divider-block":["Avgr\xE4nsare"],"panel.editor-appearance":["Editorns utseende"],"panel.export":["Exportera"],"panel.global":["Allm\xE4nt"],"panel.heading-block":["Rubrikblock"],"panel.html-block":["HTML-block"],"panel.image-block":["Bildblock"],"panel.signature-block":["Signaturblock"],"panel.spacer-block":["Mellanrumsblock"],"panel.template":["Mall"],"panel.text-block":["Textblock"],"picker.blank-desc":["Starta fr\xE5n ett tomt e-postmeddelande"],"picker.blank-title":["Tomt"],"picker.create-sample":["Skapa exempel"],"picker.create-template":["Skapa mall"],"picker.creating":["Skapar\u2026"],"picker.error-name-required":["Namn kr\xE4vs"],"picker.error-sample-taken":["Ett exempel med detta namn finns redan"],"picker.error-template-taken":["En mall med detta namn finns redan"],"picker.start-from":["Utg\xE5 fr\xE5n"],"picker.title-sample":["Nytt exempel"],"picker.title-template":["Ny mall"],"rename.error-empty":["Ange ett namn"],"rename.error-generic":["Kunde inte uppdatera malldetaljer"],"rename.error-taken":["En mall med detta namn finns redan"],"rename.name-label":["Namn"],"rename.no-tags":["Inga etiketter \xE4nnu."],"rename.tag-placeholder":["L\xE4gg till en etikett och tryck Enter"],"rename.tags":["Etiketter"],"rename.title":["Redigera detaljer"],"row.actions":["Rad\xE5tg\xE4rder"],"row.demote":["Degradera till mall"],"row.duplicate":["Duplicera"],"row.duplicate-as-template":["Duplicera som mall"],"row.edit-details":["Redigera namn och etiketter\u2026"],"row.more":["Mer"],"row.promote":["Befordra till exempel"],"save-dialog.create":["Skapa"],"save-dialog.error-empty-name":["Ange ett mallnamn"],"save-dialog.name-label":["Mallnamn"],"save-dialog.save":["Spara"],"save-dialog.saving":["Sparar..."],"save-dialog.title":["Spara som en ny mall"],"save-dialog.title-new":["Skapa en ny mall"],"savebar.error-saving":["Fel vid sparande"],"savebar.new":["Ny"],"savebar.new-template-created":["Ny mall skapad"],"savebar.sample-prefix":["Exempel"],"savebar.sample-saved":["Exempel sparat"],"savebar.save":["Spara"],"savebar.save-as":["Spara som\u2026"],"savebar.save-as-new":["Spara som ny\u2026"],"savebar.save-as-new-template":["Spara som en ny mall"],"savebar.save-changes":["Spara \xE4ndringar"],"savebar.save-changes-to-sample":["Spara \xE4ndringar till detta exempel"],"savebar.start-fresh":["Starta en ny mall"],"savebar.template-saved":["Mall sparad"],"signature.address":["Adress"],"signature.company":["F\xF6retag"],"signature.email":["E-post"],"signature.greeting":["H\xE4lsning"],"signature.image-shape":["Bildform"],"signature.image-size":["Bildstorlek"],"signature.image-url":["Bildadress"],"signature.layout":["Layout"],"signature.layout.horizontal":["Horisontell"],"signature.layout.vertical":["Vertikal"],"signature.link-color":["L\xE4nkf\xE4rg"],"signature.name":["Namn"],"signature.name-color":["Namnf\xE4rg"],"signature.phone":["Telefon"],"signature.shape.circle":["Cirkel"],"signature.shape.rounded":["Rundad"],"signature.shape.square":["Kvadrat"],"signature.title":["Titel"],"signature.website":["Webbplats"],"size.lg":["Lg"],"size.md":["Md"],"size.sm":["Sm"],"size.xs":["Xs"],"sort.last-updated":["Senast uppdaterad"],"sort.name":["Namn (A\u2013\xD6)"],"sort.recently-created":["Nyligen skapad"],"style.alignment":["Justering"],"style.background-color":["Bakgrundsf\xE4rg"],"style.border-color":["Kantf\xE4rg"],"style.border-radius":["Kantradie"],"style.font-family":["Typsnitt"],"style.font-size":["Typsnittsstorlek"],"style.font-weight":["Typsnittsvikt"],"style.letter-spacing":["Teckenavst\xE5nd"],"style.line-height":["Radh\xF6jd"],"style.padding":["Utrymme"],"style.text-color":["Textf\xE4rg"],"tab.edit":["Redigera"],"tab.html-output":["HTML-utdata"],"tab.json-output":["JSON-utdata"],"tab.preview":["F\xF6rhandsgranska"],"tab.text-output":["Textutdata"],"time.days-short":[" d sedan"],"time.hours-short":[" tim sedan"],"time.just-now":["just nu"],"time.minutes-short":[" min sedan"],"time.months-short":[" m\xE5n sedan"],"time.years-short":[" \xE5r sedan"],"toolbar.bold":["Fet"],"toolbar.bold-shortcut":["Fet (Cmd+B)"],"toolbar.italic":["Kursiv"],"toolbar.italic-shortcut":["Kursiv (Cmd+I)"],"toolbar.link":["L\xE4nk"],"toolbar.link-shortcut":["L\xE4nk (Cmd+K)"],"tune.copy":["Kopiera block"],"tune.delete":["Ta bort"],"tune.move-down":["Flytta ner"],"tune.move-up":["Flytta upp"]}');
|
|
2025
|
+
var messages3 = JSON.parse('{"avatar.shape":["Form"],"block-add.avatar":["Avatar"],"block-add.button":["Knapp"],"block-add.columns":["Kolumner"],"block-add.company-signature":["F\xF6retagssignatur"],"block-add.container":["Beh\xE5llare"],"block-add.divider":["Avgr\xE4nsare"],"block-add.heading":["Rubrik"],"block-add.html":["HTML"],"block-add.image":["Bild"],"block-add.personal-signature":["Personlig signatur"],"block-add.spacer":["Mellanrum"],"block-add.text":["Text"],"button.color":["Knappf\xE4rg"],"button.style.pill":["Piller"],"button.style.rectangle":["Rektangel"],"button.style.rounded":["Rundad"],"button.width.auto":["Auto"],"button.width.full":["Full"],"canvas.desktop-view":["Skrivbordsvy"],"canvas.mobile-view":["Mobilvy"],"columns.count":["Antal kolumner"],"columns.gap":["Kolumnmellanrum"],"common.add":["L\xE4gg till"],"common.cancel":["Avbryt"],"common.save":["Spara"],"common.saving":["Sparar\u2026"],"divider.color":["F\xE4rg"],"drawer.library":["Bibliotek"],"drawer.new-sample":["Ny mall"],"drawer.new-template":["Ny e-postmall"],"drawer.no-samples":["Inga exempel tillg\xE4ngliga"],"drawer.no-samples-match":["Inga exempel matchar dina filter"],"drawer.no-templates":["Inga sparade mallar \xE4nnu"],"drawer.no-templates-match":["Inga mallar matchar dina filter"],"drawer.search-samples":["S\xF6k exempel"],"drawer.search-templates":["S\xF6k mallar"],"drawer.sort-by":["Sortera efter"],"drawer.tab.outline":["Struktur"],"drawer.tab.samples":["Exempel"],"drawer.tab.templates":["Mallar"],"drawer.tag.all":["Alla"],"empty.description":["En tom e-postmall att utg\xE5 fr\xE5n"],"empty.slug":["Tomt e-postmeddelande"],"field.content":["Inneh\xE5ll"],"field.height":["H\xF6jd"],"field.level":["Niv\xE5"],"field.markdown":["Markdown"],"field.size":["Storlek"],"field.style":["Stil"],"field.text":["Text"],"field.url":["Adress"],"field.width":["Bredd"],"global.backdrop-color":["Bakgrundsf\xE4rg"],"global.canvas-border-color":["Canvaskantf\xE4rg"],"global.canvas-border-radius":["Canvaskantradie"],"global.canvas-color":["Canvasf\xE4rg"],"global.disable-backdrop":["D\xF6lj bakgrund"],"image.alt-text":["Alternativ text"],"image.http-warning":["Icke-HTTPS-URL: Gmail och andra klienter tar bort blandat inneh\xE5ll. Anv\xE4nd https:// f\xF6r p\xE5litlig leverans."],"image.library":["Bibliotek"],"image.link-href":["Klickl\xE4nk"],"image.source-url":["K\xE4lladress"],"image.upload":["Ladda upp"],"image.uploading":["Laddar upp\u2026"],"inspect.hint":["Klicka p\xE5 ett block f\xF6r att inspektera."],"inspect.not-found":["Blocket hittades inte. Klicka p\xE5 ett block f\xF6r att \xE5terst\xE4lla."],"inspector.tab.inspect":["Inspektera"],"inspector.tab.settings":["Inst\xE4llningar"],"inspector.tab.styles":["Stilar"],"inspector.tab.variables":["Variabler"],"outline.canvas":["Canvas"],"outline.hint":["Klicka p\xE5 en rad f\xF6r att v\xE4lja. Dra en rad f\xF6r att \xE4ndra ordning eller flytta till en beh\xE5llare."],"outline.title":["Struktur"],"panel.avatar-block":["Avatarblock"],"panel.button-block":["Knappblock"],"panel.columns-block":["Kolumner"],"panel.container-block":["Beh\xE5llarblock"],"panel.details":["Detaljer"],"panel.divider-block":["Avgr\xE4nsare"],"panel.editor-appearance":["Editorns utseende"],"panel.export":["Exportera"],"panel.global":["Allm\xE4nt"],"panel.heading-block":["Rubrikblock"],"panel.html-block":["HTML-block"],"panel.image-block":["Bildblock"],"panel.signature-block":["Signaturblock"],"panel.spacer-block":["Mellanrumsblock"],"panel.template":["Mall"],"panel.text-block":["Textblock"],"picker.blank-desc":["Starta fr\xE5n ett tomt e-postmeddelande"],"picker.blank-title":["Tomt"],"picker.create-sample":["Skapa exempel"],"picker.create-template":["Skapa mall"],"picker.creating":["Skapar\u2026"],"picker.error-name-required":["Namn kr\xE4vs"],"picker.error-sample-taken":["Ett exempel med detta namn finns redan"],"picker.error-template-taken":["En mall med detta namn finns redan"],"picker.start-from":["Utg\xE5 fr\xE5n"],"picker.title-sample":["Nytt exempel"],"picker.title-template":["Ny mall"],"redo.label":["G\xF6r om"],"redo.tooltip":["G\xF6r om"],"rename.add-tag":["L\xE4gg till en etikett"],"rename.error-empty":["Ange ett namn"],"rename.error-generic":["Kunde inte uppdatera malldetaljer"],"rename.error-taken":["En mall med detta namn finns redan"],"rename.name-label":["Namn"],"rename.no-tags":["Inga etiketter \xE4nnu."],"rename.tag-placeholder":["L\xE4gg till en etikett och tryck Enter"],"rename.tags":["Etiketter"],"rename.title":["Redigera detaljer"],"row.actions":["Rad\xE5tg\xE4rder"],"row.demote":["Degradera till mall"],"row.duplicate":["Duplicera"],"row.duplicate-as-template":["Duplicera som mall"],"row.edit-details":["Redigera namn och etiketter\u2026"],"row.more":["Mer"],"row.promote":["Befordra till exempel"],"save-dialog.create":["Skapa"],"save-dialog.error-empty-name":["Ange ett mallnamn"],"save-dialog.name-label":["Mallnamn"],"save-dialog.save":["Spara"],"save-dialog.saving":["Sparar..."],"save-dialog.title":["Spara som en ny mall"],"save-dialog.title-new":["Skapa en ny mall"],"savebar.error-saving":["Fel vid sparande"],"savebar.new":["Ny"],"savebar.new-template-created":["Ny mall skapad"],"savebar.sample-prefix":["Exempel"],"savebar.sample-saved":["Exempel sparat"],"savebar.save":["Spara"],"savebar.save-as":["Spara som\u2026"],"savebar.save-as-new":["Spara som ny\u2026"],"savebar.save-as-new-template":["Spara som en ny mall"],"savebar.save-changes":["Spara \xE4ndringar"],"savebar.save-changes-to-sample":["Spara \xE4ndringar till detta exempel"],"savebar.start-fresh":["Starta en ny mall"],"savebar.template-saved":["Mall sparad"],"settings.checkerboard":["Rutm\xF6nster"],"settings.copied":["Mall kopierad!"],"settings.delete":["Ta bort mall"],"settings.delete-confirm":["\xC4r du s\xE4ker p\xE5 att du vill ta bort denna mall?"],"settings.editor-only-hint":["Syns bara i editorn \u2014 n\xE5r aldrig det renderade mejlet."],"settings.no-rename-cb":["Koppla renameTemplate-callback f\xF6r att kunna redigera h\xE4rifr\xE5n"],"settings.no-template":["Ingen mall vald"],"settings.save-as-sample":["Spara som exempelmall"],"settings.save-details":["Spara detaljer"],"settings.save-disabled":["Sparfunktionen \xE4r inaktiverad. Aktivera genom att ange n\xF6dv\xE4ndiga callback-funktioner."],"settings.saved":["Sparad"],"settings.solid":["Enf\xE4rgad"],"settings.workspace-background":["Arbetsytans bakgrund"],"signature.address":["Adress"],"signature.company":["F\xF6retag"],"signature.email":["E-post"],"signature.greeting":["H\xE4lsning"],"signature.image-shape":["Bildform"],"signature.image-size":["Bildstorlek"],"signature.image-url":["Bildadress"],"signature.layout":["Layout"],"signature.layout.horizontal":["Horisontell"],"signature.layout.vertical":["Vertikal"],"signature.link-color":["L\xE4nkf\xE4rg"],"signature.name":["Namn"],"signature.name-color":["Namnf\xE4rg"],"signature.phone":["Telefon"],"signature.shape.circle":["Cirkel"],"signature.shape.rounded":["Rundad"],"signature.shape.square":["Kvadrat"],"signature.title":["Titel"],"signature.website":["Webbplats"],"size.lg":["Lg"],"size.md":["Md"],"size.sm":["Sm"],"size.xs":["Xs"],"sort.last-updated":["Senast uppdaterad"],"sort.name":["Namn (A\u2013\xD6)"],"sort.recently-created":["Nyligen skapad"],"style.alignment":["Justering"],"style.background-color":["Bakgrundsf\xE4rg"],"style.border-color":["Kantf\xE4rg"],"style.border-radius":["Kantradie"],"style.font-family":["Typsnitt"],"style.font-size":["Typsnittsstorlek"],"style.font-weight":["Typsnittsvikt"],"style.letter-spacing":["Teckenavst\xE5nd"],"style.line-height":["Radh\xF6jd"],"style.padding":["Utrymme"],"style.text-color":["Textf\xE4rg"],"tab.edit":["Redigera"],"tab.html-output":["HTML-utdata"],"tab.json-output":["JSON-utdata"],"tab.preview":["F\xF6rhandsgranska"],"tab.text-output":["Textutdata"],"tag.marketing":["marknadsf\xF6ring"],"tag.transactional":["transaktionella"],"time.days-short":[" d sedan"],"time.hours-short":[" tim sedan"],"time.just-now":["just nu"],"time.minutes-short":[" min sedan"],"time.months-short":[" m\xE5n sedan"],"time.years-short":[" \xE5r sedan"],"toolbar.bold":["Fet"],"toolbar.bold-shortcut":["Fet (Cmd+B)"],"toolbar.italic":["Kursiv"],"toolbar.italic-shortcut":["Kursiv (Cmd+I)"],"toolbar.link":["L\xE4nk"],"toolbar.link-shortcut":["L\xE4nk (Cmd+K)"],"tune.copy":["Kopiera block"],"tune.delete":["Ta bort"],"tune.move-down":["Flytta ner"],"tune.move-up":["Flytta upp"],"undo.label":["\xC5ngra"],"undo.tooltip":["\xC5ngra"]}');
|
|
2026
2026
|
var SUPPORTED_LOCALES = ["en", "sv", "fi"];
|
|
2027
2027
|
var CATALOGS = {
|
|
2028
2028
|
en: messages,
|
|
@@ -2236,21 +2236,21 @@ function buildSavePayload(doc) {
|
|
|
2236
2236
|
}
|
|
2237
2237
|
|
|
2238
2238
|
// src/app/context.tsx
|
|
2239
|
-
var EmailEditorContext =
|
|
2239
|
+
var EmailEditorContext = React62.createContext(null);
|
|
2240
2240
|
var EmailEditorProvider = ({
|
|
2241
2241
|
children,
|
|
2242
2242
|
initialTemplateId = null,
|
|
2243
2243
|
initialTemplateName = null,
|
|
2244
2244
|
onSave
|
|
2245
2245
|
}) => {
|
|
2246
|
-
const [currentTemplateId, setCurrentTemplateId] =
|
|
2247
|
-
const [currentTemplateName, setCurrentTemplateName] =
|
|
2248
|
-
const [currentTemplateKind, setCurrentTemplateKind] =
|
|
2249
|
-
const [currentTemplateTags, setCurrentTemplateTagsState] =
|
|
2250
|
-
const saveListenersRef =
|
|
2251
|
-
const onSaveRef =
|
|
2246
|
+
const [currentTemplateId, setCurrentTemplateId] = React62.useState(initialTemplateId);
|
|
2247
|
+
const [currentTemplateName, setCurrentTemplateName] = React62.useState(initialTemplateName);
|
|
2248
|
+
const [currentTemplateKind, setCurrentTemplateKind] = React62.useState(null);
|
|
2249
|
+
const [currentTemplateTags, setCurrentTemplateTagsState] = React62.useState([]);
|
|
2250
|
+
const saveListenersRef = React62.useRef([]);
|
|
2251
|
+
const onSaveRef = React62.useRef(onSave);
|
|
2252
2252
|
onSaveRef.current = onSave;
|
|
2253
|
-
const saveTemplate =
|
|
2253
|
+
const saveTemplate = React62.useCallback(() => {
|
|
2254
2254
|
const currentDoc = getDocument();
|
|
2255
2255
|
saveListenersRef.current.forEach((listener) => listener(currentDoc));
|
|
2256
2256
|
if (onSaveRef.current) {
|
|
@@ -2258,7 +2258,7 @@ var EmailEditorProvider = ({
|
|
|
2258
2258
|
}
|
|
2259
2259
|
return currentDoc;
|
|
2260
2260
|
}, []);
|
|
2261
|
-
const loadTemplate =
|
|
2261
|
+
const loadTemplate = React62.useCallback(
|
|
2262
2262
|
(_newTemplate, templateId, templateName, kind, tags) => {
|
|
2263
2263
|
if (templateId !== void 0) setCurrentTemplateId(templateId);
|
|
2264
2264
|
if (templateName !== void 0) setCurrentTemplateName(templateName);
|
|
@@ -2267,7 +2267,7 @@ var EmailEditorProvider = ({
|
|
|
2267
2267
|
},
|
|
2268
2268
|
[]
|
|
2269
2269
|
);
|
|
2270
|
-
const setCurrentTemplate =
|
|
2270
|
+
const setCurrentTemplate = React62.useCallback(
|
|
2271
2271
|
(templateId, templateName, kind, tags) => {
|
|
2272
2272
|
setCurrentTemplateId(templateId);
|
|
2273
2273
|
setCurrentTemplateName(templateName);
|
|
@@ -2276,16 +2276,16 @@ var EmailEditorProvider = ({
|
|
|
2276
2276
|
},
|
|
2277
2277
|
[]
|
|
2278
2278
|
);
|
|
2279
|
-
const setCurrentTemplateTags =
|
|
2279
|
+
const setCurrentTemplateTags = React62.useCallback((tags) => {
|
|
2280
2280
|
setCurrentTemplateTagsState(tags);
|
|
2281
2281
|
}, []);
|
|
2282
|
-
const registerSaveListener =
|
|
2282
|
+
const registerSaveListener = React62.useCallback((callback) => {
|
|
2283
2283
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
2284
2284
|
return () => {
|
|
2285
2285
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
2286
2286
|
};
|
|
2287
2287
|
}, []);
|
|
2288
|
-
const value =
|
|
2288
|
+
const value = React62.useMemo(
|
|
2289
2289
|
() => ({
|
|
2290
2290
|
currentTemplateId,
|
|
2291
2291
|
currentTemplateName,
|
|
@@ -2309,24 +2309,24 @@ var EmailEditorProvider = ({
|
|
|
2309
2309
|
setCurrentTemplateTags
|
|
2310
2310
|
]
|
|
2311
2311
|
);
|
|
2312
|
-
return /* @__PURE__ */
|
|
2312
|
+
return /* @__PURE__ */ React62__default.default.createElement(EmailEditorContext.Provider, { value }, children);
|
|
2313
2313
|
};
|
|
2314
2314
|
var useEmailEditor = () => {
|
|
2315
|
-
const context =
|
|
2315
|
+
const context = React62.useContext(EmailEditorContext);
|
|
2316
2316
|
if (!context) {
|
|
2317
2317
|
throw new Error("useEmailEditor must be used within an EmailEditorProvider");
|
|
2318
2318
|
}
|
|
2319
2319
|
return context;
|
|
2320
2320
|
};
|
|
2321
|
-
var ImageCallbacksContext =
|
|
2321
|
+
var ImageCallbacksContext = React62.createContext({});
|
|
2322
2322
|
function ImageCallbacksProvider({
|
|
2323
2323
|
callbacks,
|
|
2324
2324
|
children
|
|
2325
2325
|
}) {
|
|
2326
|
-
return /* @__PURE__ */
|
|
2326
|
+
return /* @__PURE__ */ React62__default.default.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
|
|
2327
2327
|
}
|
|
2328
2328
|
function useImageCallbacks() {
|
|
2329
|
-
return
|
|
2329
|
+
return React62.useContext(ImageCallbacksContext);
|
|
2330
2330
|
}
|
|
2331
2331
|
var TITLE_KEYS = {
|
|
2332
2332
|
"Editor appearance": "panel.editor-appearance",
|
|
@@ -2343,19 +2343,20 @@ var TITLE_KEYS = {
|
|
|
2343
2343
|
"Divider block": "panel.divider-block",
|
|
2344
2344
|
"Columns block": "panel.columns-block",
|
|
2345
2345
|
"Container block": "panel.container-block",
|
|
2346
|
-
"Html block": "panel.html-block"
|
|
2346
|
+
"Html block": "panel.html-block",
|
|
2347
|
+
Details: "panel.details"
|
|
2347
2348
|
};
|
|
2348
2349
|
function BaseSidebarPanel({ title, children }) {
|
|
2349
2350
|
const key = TITLE_KEYS[title];
|
|
2350
2351
|
const displayTitle = key ? t(key, title) : title;
|
|
2351
|
-
return /* @__PURE__ */
|
|
2352
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, displayTitle), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
|
|
2352
2353
|
}
|
|
2353
2354
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
2354
|
-
const [value, setValue] =
|
|
2355
|
-
|
|
2355
|
+
const [value, setValue] = React62.useState(defaultValue);
|
|
2356
|
+
React62.useEffect(() => {
|
|
2356
2357
|
setValue(defaultValue);
|
|
2357
2358
|
}, [defaultValue]);
|
|
2358
|
-
return /* @__PURE__ */
|
|
2359
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React62__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React62__default.default.createElement(
|
|
2359
2360
|
material.ToggleButtonGroup,
|
|
2360
2361
|
{
|
|
2361
2362
|
exclusive: true,
|
|
@@ -2375,7 +2376,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
2375
2376
|
}
|
|
2376
2377
|
function RawSliderInput(_a) {
|
|
2377
2378
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
2378
|
-
return /* @__PURE__ */
|
|
2379
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React62__default.default.createElement(
|
|
2379
2380
|
material.Slider,
|
|
2380
2381
|
__spreadProps(__spreadValues({}, props), {
|
|
2381
2382
|
value,
|
|
@@ -2386,14 +2387,14 @@ function RawSliderInput(_a) {
|
|
|
2386
2387
|
setValue(value2);
|
|
2387
2388
|
}
|
|
2388
2389
|
})
|
|
2389
|
-
), /* @__PURE__ */
|
|
2390
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
2390
2391
|
}
|
|
2391
2392
|
|
|
2392
2393
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
2393
2394
|
function SliderInput(_a) {
|
|
2394
2395
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
2395
|
-
const [value, setValue] =
|
|
2396
|
-
return /* @__PURE__ */
|
|
2396
|
+
const [value, setValue] = React62.useState(defaultValue);
|
|
2397
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React62__default.default.createElement(
|
|
2397
2398
|
RawSliderInput,
|
|
2398
2399
|
__spreadValues({
|
|
2399
2400
|
value,
|
|
@@ -2405,12 +2406,12 @@ function SliderInput(_a) {
|
|
|
2405
2406
|
));
|
|
2406
2407
|
}
|
|
2407
2408
|
function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
|
|
2408
|
-
const [value, setValue] =
|
|
2409
|
+
const [value, setValue] = React62.useState(defaultValue);
|
|
2409
2410
|
const isMultiline = typeof rows === "number" && rows > 1;
|
|
2410
|
-
|
|
2411
|
+
React62.useEffect(() => {
|
|
2411
2412
|
setValue(defaultValue);
|
|
2412
2413
|
}, [defaultValue]);
|
|
2413
|
-
return /* @__PURE__ */
|
|
2414
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
2414
2415
|
material.TextField,
|
|
2415
2416
|
{
|
|
2416
2417
|
fullWidth: true,
|
|
@@ -2436,7 +2437,7 @@ var TILE_BUTTON = {
|
|
|
2436
2437
|
};
|
|
2437
2438
|
function Swatch({ paletteColors, value, onChange }) {
|
|
2438
2439
|
const renderButton2 = (colorValue) => {
|
|
2439
|
-
return /* @__PURE__ */
|
|
2440
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
2440
2441
|
material.Button,
|
|
2441
2442
|
{
|
|
2442
2443
|
key: colorValue,
|
|
@@ -2455,7 +2456,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
2455
2456
|
}
|
|
2456
2457
|
);
|
|
2457
2458
|
};
|
|
2458
|
-
return /* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
|
|
2459
2460
|
}
|
|
2460
2461
|
|
|
2461
2462
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2522,7 +2523,7 @@ var SX = {
|
|
|
2522
2523
|
}
|
|
2523
2524
|
};
|
|
2524
2525
|
function Picker({ value, onChange }) {
|
|
2525
|
-
return /* @__PURE__ */
|
|
2526
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React62__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React62__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React62__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React62__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
|
|
2526
2527
|
}
|
|
2527
2528
|
|
|
2528
2529
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2535,8 +2536,8 @@ var BUTTON_SX = {
|
|
|
2535
2536
|
bgcolor: "#FFFFFF"
|
|
2536
2537
|
};
|
|
2537
2538
|
function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
2538
|
-
const [anchorEl, setAnchorEl] =
|
|
2539
|
-
const [value, setValue] =
|
|
2539
|
+
const [anchorEl, setAnchorEl] = React62.useState(null);
|
|
2540
|
+
const [value, setValue] = React62.useState(defaultValue);
|
|
2540
2541
|
const handleClickOpen = (event) => {
|
|
2541
2542
|
setAnchorEl(event.currentTarget);
|
|
2542
2543
|
};
|
|
@@ -2547,7 +2548,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2547
2548
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2548
2549
|
return null;
|
|
2549
2550
|
}
|
|
2550
|
-
return /* @__PURE__ */
|
|
2551
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
2551
2552
|
material.ButtonBase,
|
|
2552
2553
|
{
|
|
2553
2554
|
onClick: () => {
|
|
@@ -2555,16 +2556,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2555
2556
|
onChange(null);
|
|
2556
2557
|
}
|
|
2557
2558
|
},
|
|
2558
|
-
/* @__PURE__ */
|
|
2559
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2559
2560
|
);
|
|
2560
2561
|
};
|
|
2561
2562
|
const renderOpenButton = () => {
|
|
2562
2563
|
if (value) {
|
|
2563
|
-
return /* @__PURE__ */
|
|
2564
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2564
2565
|
}
|
|
2565
|
-
return /* @__PURE__ */
|
|
2566
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
|
|
2566
2567
|
};
|
|
2567
|
-
return /* @__PURE__ */
|
|
2568
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React62__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React62__default.default.createElement(
|
|
2568
2569
|
material.Menu,
|
|
2569
2570
|
{
|
|
2570
2571
|
anchorEl,
|
|
@@ -2574,7 +2575,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2574
2575
|
sx: { height: "auto", padding: 0 }
|
|
2575
2576
|
}
|
|
2576
2577
|
},
|
|
2577
|
-
/* @__PURE__ */
|
|
2578
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
2578
2579
|
Picker,
|
|
2579
2580
|
{
|
|
2580
2581
|
value: value || "",
|
|
@@ -2589,10 +2590,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2589
2590
|
|
|
2590
2591
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2591
2592
|
function ColorInput2(props) {
|
|
2592
|
-
return /* @__PURE__ */
|
|
2593
|
+
return /* @__PURE__ */ React62__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2593
2594
|
}
|
|
2594
2595
|
function NullableColorInput(props) {
|
|
2595
|
-
return /* @__PURE__ */
|
|
2596
|
+
return /* @__PURE__ */ React62__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2596
2597
|
}
|
|
2597
2598
|
|
|
2598
2599
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2645,13 +2646,13 @@ var FONT_FAMILIES = [
|
|
|
2645
2646
|
];
|
|
2646
2647
|
|
|
2647
2648
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2648
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2649
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2649
2650
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2650
|
-
const [value, setValue] =
|
|
2651
|
-
|
|
2651
|
+
const [value, setValue] = React62.useState(defaultValue != null ? defaultValue : "inherit");
|
|
2652
|
+
React62.useEffect(() => {
|
|
2652
2653
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2653
2654
|
}, [defaultValue]);
|
|
2654
|
-
return /* @__PURE__ */
|
|
2655
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
2655
2656
|
material.TextField,
|
|
2656
2657
|
{
|
|
2657
2658
|
select: true,
|
|
@@ -2664,23 +2665,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2664
2665
|
onChange(v === null ? null : v);
|
|
2665
2666
|
}
|
|
2666
2667
|
},
|
|
2667
|
-
/* @__PURE__ */
|
|
2668
|
+
/* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2668
2669
|
OPTIONS
|
|
2669
2670
|
);
|
|
2670
2671
|
}
|
|
2671
2672
|
function FontSizeInput({ label, defaultValue, onChange }) {
|
|
2672
|
-
const [value, setValue] =
|
|
2673
|
-
|
|
2673
|
+
const [value, setValue] = React62.useState(defaultValue);
|
|
2674
|
+
React62.useEffect(() => {
|
|
2674
2675
|
setValue(defaultValue);
|
|
2675
2676
|
}, [defaultValue]);
|
|
2676
2677
|
const handleChange = (value2) => {
|
|
2677
2678
|
setValue(value2);
|
|
2678
2679
|
onChange(value2);
|
|
2679
2680
|
};
|
|
2680
|
-
return /* @__PURE__ */
|
|
2681
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React62__default.default.createElement(
|
|
2681
2682
|
RawSliderInput,
|
|
2682
2683
|
{
|
|
2683
|
-
iconLabel: /* @__PURE__ */
|
|
2684
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2684
2685
|
value,
|
|
2685
2686
|
setValue: handleChange,
|
|
2686
2687
|
units: "px",
|
|
@@ -2691,11 +2692,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2691
2692
|
));
|
|
2692
2693
|
}
|
|
2693
2694
|
function FontWeightInput({ label, defaultValue, onChange }) {
|
|
2694
|
-
const [value, setValue] =
|
|
2695
|
-
|
|
2695
|
+
const [value, setValue] = React62.useState(defaultValue);
|
|
2696
|
+
React62.useEffect(() => {
|
|
2696
2697
|
setValue(defaultValue);
|
|
2697
2698
|
}, [defaultValue]);
|
|
2698
|
-
return /* @__PURE__ */
|
|
2699
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
2699
2700
|
RadioGroupInput,
|
|
2700
2701
|
{
|
|
2701
2702
|
label,
|
|
@@ -2705,23 +2706,23 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2705
2706
|
onChange(fontWeight);
|
|
2706
2707
|
}
|
|
2707
2708
|
},
|
|
2708
|
-
/* @__PURE__ */
|
|
2709
|
-
/* @__PURE__ */
|
|
2709
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
|
|
2710
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
|
|
2710
2711
|
);
|
|
2711
2712
|
}
|
|
2712
2713
|
function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
2713
|
-
const [value, setValue] =
|
|
2714
|
-
|
|
2714
|
+
const [value, setValue] = React62.useState(defaultValue != null ? defaultValue : 0);
|
|
2715
|
+
React62.useEffect(() => {
|
|
2715
2716
|
setValue(defaultValue != null ? defaultValue : 0);
|
|
2716
2717
|
}, [defaultValue]);
|
|
2717
2718
|
const handleChange = (v) => {
|
|
2718
2719
|
setValue(v);
|
|
2719
2720
|
onChange(v === 0 ? null : v);
|
|
2720
2721
|
};
|
|
2721
|
-
return /* @__PURE__ */
|
|
2722
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React62__default.default.createElement(
|
|
2722
2723
|
RawSliderInput,
|
|
2723
2724
|
{
|
|
2724
|
-
iconLabel: /* @__PURE__ */
|
|
2725
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { fontSize: 16 } }),
|
|
2725
2726
|
value,
|
|
2726
2727
|
setValue: handleChange,
|
|
2727
2728
|
units: "px",
|
|
@@ -2732,18 +2733,18 @@ function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
|
2732
2733
|
));
|
|
2733
2734
|
}
|
|
2734
2735
|
function LineHeightInput({ label, defaultValue, onChange }) {
|
|
2735
|
-
const [value, setValue] =
|
|
2736
|
-
|
|
2736
|
+
const [value, setValue] = React62.useState(defaultValue != null ? defaultValue : 0);
|
|
2737
|
+
React62.useEffect(() => {
|
|
2737
2738
|
setValue(defaultValue != null ? defaultValue : 0);
|
|
2738
2739
|
}, [defaultValue]);
|
|
2739
2740
|
const handleChange = (v) => {
|
|
2740
2741
|
setValue(v);
|
|
2741
2742
|
onChange(v === 0 ? null : v);
|
|
2742
2743
|
};
|
|
2743
|
-
return /* @__PURE__ */
|
|
2744
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React62__default.default.createElement(
|
|
2744
2745
|
RawSliderInput,
|
|
2745
2746
|
{
|
|
2746
|
-
iconLabel: /* @__PURE__ */
|
|
2747
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
|
|
2747
2748
|
value,
|
|
2748
2749
|
setValue: handleChange,
|
|
2749
2750
|
units: "",
|
|
@@ -2754,7 +2755,7 @@ function LineHeightInput({ label, defaultValue, onChange }) {
|
|
|
2754
2755
|
));
|
|
2755
2756
|
}
|
|
2756
2757
|
function PaddingInput({ label, defaultValue, onChange }) {
|
|
2757
|
-
const [value, setValue] =
|
|
2758
|
+
const [value, setValue] = React62.useState(() => {
|
|
2758
2759
|
if (defaultValue) {
|
|
2759
2760
|
return defaultValue;
|
|
2760
2761
|
}
|
|
@@ -2772,10 +2773,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2772
2773
|
setValue(v);
|
|
2773
2774
|
onChange(v);
|
|
2774
2775
|
}
|
|
2775
|
-
return /* @__PURE__ */
|
|
2776
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React62__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React62__default.default.createElement(
|
|
2776
2777
|
RawSliderInput,
|
|
2777
2778
|
{
|
|
2778
|
-
iconLabel: /* @__PURE__ */
|
|
2779
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2779
2780
|
value: value.top,
|
|
2780
2781
|
setValue: (num) => handleChange("top", num),
|
|
2781
2782
|
units: "px",
|
|
@@ -2784,10 +2785,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2784
2785
|
max: 80,
|
|
2785
2786
|
marks: true
|
|
2786
2787
|
}
|
|
2787
|
-
), /* @__PURE__ */
|
|
2788
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2788
2789
|
RawSliderInput,
|
|
2789
2790
|
{
|
|
2790
|
-
iconLabel: /* @__PURE__ */
|
|
2791
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2791
2792
|
value: value.bottom,
|
|
2792
2793
|
setValue: (num) => handleChange("bottom", num),
|
|
2793
2794
|
units: "px",
|
|
@@ -2796,10 +2797,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2796
2797
|
max: 80,
|
|
2797
2798
|
marks: true
|
|
2798
2799
|
}
|
|
2799
|
-
), /* @__PURE__ */
|
|
2800
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2800
2801
|
RawSliderInput,
|
|
2801
2802
|
{
|
|
2802
|
-
iconLabel: /* @__PURE__ */
|
|
2803
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2803
2804
|
value: value.left,
|
|
2804
2805
|
setValue: (num) => handleChange("left", num),
|
|
2805
2806
|
units: "px",
|
|
@@ -2808,10 +2809,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2808
2809
|
max: 80,
|
|
2809
2810
|
marks: true
|
|
2810
2811
|
}
|
|
2811
|
-
), /* @__PURE__ */
|
|
2812
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2812
2813
|
RawSliderInput,
|
|
2813
2814
|
{
|
|
2814
|
-
iconLabel: /* @__PURE__ */
|
|
2815
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2815
2816
|
value: value.right,
|
|
2816
2817
|
setValue: (num) => handleChange("right", num),
|
|
2817
2818
|
units: "px",
|
|
@@ -2823,11 +2824,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2823
2824
|
));
|
|
2824
2825
|
}
|
|
2825
2826
|
function TextAlignInput({ label, defaultValue, onChange }) {
|
|
2826
|
-
const [value, setValue] =
|
|
2827
|
-
|
|
2827
|
+
const [value, setValue] = React62.useState(defaultValue != null ? defaultValue : "left");
|
|
2828
|
+
React62.useEffect(() => {
|
|
2828
2829
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2829
2830
|
}, [defaultValue]);
|
|
2830
|
-
return /* @__PURE__ */
|
|
2831
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
2831
2832
|
RadioGroupInput,
|
|
2832
2833
|
{
|
|
2833
2834
|
label,
|
|
@@ -2837,9 +2838,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2837
2838
|
onChange(value2);
|
|
2838
2839
|
}
|
|
2839
2840
|
},
|
|
2840
|
-
/* @__PURE__ */
|
|
2841
|
-
/* @__PURE__ */
|
|
2842
|
-
/* @__PURE__ */
|
|
2841
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2842
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2843
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2843
2844
|
);
|
|
2844
2845
|
}
|
|
2845
2846
|
|
|
@@ -2852,14 +2853,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2852
2853
|
};
|
|
2853
2854
|
switch (name) {
|
|
2854
2855
|
case "backgroundColor":
|
|
2855
|
-
return /* @__PURE__ */
|
|
2856
|
+
return /* @__PURE__ */ React62__default.default.createElement(NullableColorInput, { label: t("style.background-color", "Background color"), defaultValue, onChange: handleChange });
|
|
2856
2857
|
case "borderColor":
|
|
2857
|
-
return /* @__PURE__ */
|
|
2858
|
+
return /* @__PURE__ */ React62__default.default.createElement(NullableColorInput, { label: t("style.border-color", "Border color"), defaultValue, onChange: handleChange });
|
|
2858
2859
|
case "borderRadius":
|
|
2859
|
-
return /* @__PURE__ */
|
|
2860
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
2860
2861
|
SliderInput,
|
|
2861
2862
|
{
|
|
2862
|
-
iconLabel: /* @__PURE__ */
|
|
2863
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2863
2864
|
units: "px",
|
|
2864
2865
|
step: 4,
|
|
2865
2866
|
marks: true,
|
|
@@ -2871,33 +2872,33 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2871
2872
|
}
|
|
2872
2873
|
);
|
|
2873
2874
|
case "color":
|
|
2874
|
-
return /* @__PURE__ */
|
|
2875
|
+
return /* @__PURE__ */ React62__default.default.createElement(NullableColorInput, { label: t("style.text-color", "Text color"), defaultValue, onChange: handleChange });
|
|
2875
2876
|
case "fontFamily":
|
|
2876
|
-
return /* @__PURE__ */
|
|
2877
|
+
return /* @__PURE__ */ React62__default.default.createElement(NullableFontFamily, { label: t("style.font-family", "Font family"), defaultValue, onChange: handleChange });
|
|
2877
2878
|
case "fontSize":
|
|
2878
|
-
return /* @__PURE__ */
|
|
2879
|
+
return /* @__PURE__ */ React62__default.default.createElement(FontSizeInput, { label: t("style.font-size", "Font size"), defaultValue, onChange: handleChange });
|
|
2879
2880
|
case "fontWeight":
|
|
2880
|
-
return /* @__PURE__ */
|
|
2881
|
+
return /* @__PURE__ */ React62__default.default.createElement(FontWeightInput, { label: t("style.font-weight", "Font weight"), defaultValue, onChange: handleChange });
|
|
2881
2882
|
case "lineHeight":
|
|
2882
|
-
return /* @__PURE__ */
|
|
2883
|
+
return /* @__PURE__ */ React62__default.default.createElement(LineHeightInput, { label: t("style.line-height", "Line height"), defaultValue, onChange: handleChange });
|
|
2883
2884
|
case "letterSpacing":
|
|
2884
|
-
return /* @__PURE__ */
|
|
2885
|
+
return /* @__PURE__ */ React62__default.default.createElement(LetterSpacingInput, { label: t("style.letter-spacing", "Letter spacing"), defaultValue, onChange: handleChange });
|
|
2885
2886
|
case "textAlign":
|
|
2886
|
-
return /* @__PURE__ */
|
|
2887
|
+
return /* @__PURE__ */ React62__default.default.createElement(TextAlignInput, { label: t("style.alignment", "Alignment"), defaultValue, onChange: handleChange });
|
|
2887
2888
|
case "padding":
|
|
2888
|
-
return /* @__PURE__ */
|
|
2889
|
+
return /* @__PURE__ */ React62__default.default.createElement(PaddingInput, { label: t("style.padding", "Padding"), defaultValue, onChange: handleChange });
|
|
2889
2890
|
}
|
|
2890
2891
|
}
|
|
2891
2892
|
|
|
2892
2893
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2893
2894
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2894
|
-
return /* @__PURE__ */
|
|
2895
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React62__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2895
2896
|
}
|
|
2896
2897
|
|
|
2897
2898
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
2898
2899
|
function AvatarSidebarPanel({ data, setData }) {
|
|
2899
2900
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2900
|
-
const [, setErrors] =
|
|
2901
|
+
const [, setErrors] = React62.useState(null);
|
|
2901
2902
|
const updateData = (d) => {
|
|
2902
2903
|
const res = AvatarPropsSchema.safeParse(d);
|
|
2903
2904
|
if (res.success) {
|
|
@@ -2911,11 +2912,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2911
2912
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2912
2913
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2913
2914
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2914
|
-
return /* @__PURE__ */
|
|
2915
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
2915
2916
|
SliderInput,
|
|
2916
2917
|
{
|
|
2917
2918
|
label: t("field.size", "Size"),
|
|
2918
|
-
iconLabel: /* @__PURE__ */
|
|
2919
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2919
2920
|
units: "px",
|
|
2920
2921
|
step: 3,
|
|
2921
2922
|
min: 32,
|
|
@@ -2925,7 +2926,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2925
2926
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2926
2927
|
}
|
|
2927
2928
|
}
|
|
2928
|
-
), /* @__PURE__ */
|
|
2929
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2929
2930
|
RadioGroupInput,
|
|
2930
2931
|
{
|
|
2931
2932
|
label: t("avatar.shape", "Shape"),
|
|
@@ -2934,10 +2935,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2934
2935
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2935
2936
|
}
|
|
2936
2937
|
},
|
|
2937
|
-
/* @__PURE__ */
|
|
2938
|
-
/* @__PURE__ */
|
|
2939
|
-
/* @__PURE__ */
|
|
2940
|
-
), /* @__PURE__ */
|
|
2938
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "circle" }, t("signature.shape.circle", "Circle")),
|
|
2939
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "square" }, t("signature.shape.square", "Square")),
|
|
2940
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "rounded" }, t("signature.shape.rounded", "Rounded"))
|
|
2941
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2941
2942
|
TextInput,
|
|
2942
2943
|
{
|
|
2943
2944
|
label: t("signature.image-url", "Image URL"),
|
|
@@ -2946,7 +2947,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2946
2947
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2947
2948
|
}
|
|
2948
2949
|
}
|
|
2949
|
-
), /* @__PURE__ */
|
|
2950
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2950
2951
|
TextInput,
|
|
2951
2952
|
{
|
|
2952
2953
|
label: t("image.alt-text", "Alt text"),
|
|
@@ -2955,7 +2956,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2955
2956
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2956
2957
|
}
|
|
2957
2958
|
}
|
|
2958
|
-
), /* @__PURE__ */
|
|
2959
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2959
2960
|
MultiStylePropertyPanel,
|
|
2960
2961
|
{
|
|
2961
2962
|
names: ["textAlign", "padding"],
|
|
@@ -2966,7 +2967,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2966
2967
|
}
|
|
2967
2968
|
function ButtonSidebarPanel({ data, setData }) {
|
|
2968
2969
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2969
|
-
const [, setErrors] =
|
|
2970
|
+
const [, setErrors] = React62.useState(null);
|
|
2970
2971
|
const updateData = (d) => {
|
|
2971
2972
|
const res = ButtonPropsSchema.safeParse(d);
|
|
2972
2973
|
if (res.success) {
|
|
@@ -2983,65 +2984,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2983
2984
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2984
2985
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2985
2986
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2986
|
-
return /* @__PURE__ */
|
|
2987
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
2987
2988
|
TextInput,
|
|
2988
2989
|
{
|
|
2989
2990
|
label: t("field.text", "Text"),
|
|
2990
2991
|
defaultValue: text,
|
|
2991
2992
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2992
2993
|
}
|
|
2993
|
-
), /* @__PURE__ */
|
|
2994
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
2994
2995
|
TextInput,
|
|
2995
2996
|
{
|
|
2996
2997
|
label: t("field.url", "Url"),
|
|
2997
2998
|
defaultValue: url,
|
|
2998
2999
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2999
3000
|
}
|
|
3000
|
-
), /* @__PURE__ */
|
|
3001
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3001
3002
|
RadioGroupInput,
|
|
3002
3003
|
{
|
|
3003
3004
|
label: t("field.width", "Width"),
|
|
3004
3005
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
3005
3006
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
3006
3007
|
},
|
|
3007
|
-
/* @__PURE__ */
|
|
3008
|
-
/* @__PURE__ */
|
|
3009
|
-
), /* @__PURE__ */
|
|
3008
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, t("button.width.full", "Full")),
|
|
3009
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "AUTO" }, t("button.width.auto", "Auto"))
|
|
3010
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3010
3011
|
RadioGroupInput,
|
|
3011
3012
|
{
|
|
3012
3013
|
label: t("field.size", "Size"),
|
|
3013
3014
|
defaultValue: size,
|
|
3014
3015
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
3015
3016
|
},
|
|
3016
|
-
/* @__PURE__ */
|
|
3017
|
-
/* @__PURE__ */
|
|
3018
|
-
/* @__PURE__ */
|
|
3019
|
-
/* @__PURE__ */
|
|
3020
|
-
), /* @__PURE__ */
|
|
3017
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "x-small" }, t("size.xs", "Xs")),
|
|
3018
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "small" }, t("size.sm", "Sm")),
|
|
3019
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "medium" }, t("size.md", "Md")),
|
|
3020
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "large" }, t("size.lg", "Lg"))
|
|
3021
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3021
3022
|
RadioGroupInput,
|
|
3022
3023
|
{
|
|
3023
3024
|
label: t("field.style", "Style"),
|
|
3024
3025
|
defaultValue: buttonStyle,
|
|
3025
3026
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
3026
3027
|
},
|
|
3027
|
-
/* @__PURE__ */
|
|
3028
|
-
/* @__PURE__ */
|
|
3029
|
-
/* @__PURE__ */
|
|
3030
|
-
), /* @__PURE__ */
|
|
3028
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "rectangle" }, t("button.style.rectangle", "Rectangle")),
|
|
3029
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "rounded" }, t("button.style.rounded", "Rounded")),
|
|
3030
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "pill" }, t("button.style.pill", "Pill"))
|
|
3031
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3031
3032
|
ColorInput2,
|
|
3032
3033
|
{
|
|
3033
3034
|
label: t("style.text-color", "Text color"),
|
|
3034
3035
|
defaultValue: buttonTextColor,
|
|
3035
3036
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
3036
3037
|
}
|
|
3037
|
-
), /* @__PURE__ */
|
|
3038
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3038
3039
|
ColorInput2,
|
|
3039
3040
|
{
|
|
3040
3041
|
label: t("button.color", "Button color"),
|
|
3041
3042
|
defaultValue: buttonBackgroundColor,
|
|
3042
3043
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
3043
3044
|
}
|
|
3044
|
-
), /* @__PURE__ */
|
|
3045
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3045
3046
|
MultiStylePropertyPanel,
|
|
3046
3047
|
{
|
|
3047
3048
|
names: [
|
|
@@ -3076,7 +3077,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
3076
3077
|
const value = parseInt(ev.target.value);
|
|
3077
3078
|
onChange(isNaN(value) ? null : value);
|
|
3078
3079
|
};
|
|
3079
|
-
return /* @__PURE__ */
|
|
3080
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
3080
3081
|
material.TextField,
|
|
3081
3082
|
{
|
|
3082
3083
|
fullWidth: true,
|
|
@@ -3087,7 +3088,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
3087
3088
|
placeholder: "auto",
|
|
3088
3089
|
size: "small",
|
|
3089
3090
|
InputProps: {
|
|
3090
|
-
endAdornment: /* @__PURE__ */
|
|
3091
|
+
endAdornment: /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
3091
3092
|
}
|
|
3092
3093
|
}
|
|
3093
3094
|
);
|
|
@@ -3095,7 +3096,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
3095
3096
|
|
|
3096
3097
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
|
|
3097
3098
|
function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
3098
|
-
const [currentValue, setCurrentValue] =
|
|
3099
|
+
const [currentValue, setCurrentValue] = React62.useState(() => {
|
|
3099
3100
|
if (defaultValue) {
|
|
3100
3101
|
return defaultValue;
|
|
3101
3102
|
}
|
|
@@ -3109,7 +3110,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3109
3110
|
};
|
|
3110
3111
|
let column3 = null;
|
|
3111
3112
|
{
|
|
3112
|
-
column3 = /* @__PURE__ */
|
|
3113
|
+
column3 = /* @__PURE__ */ React62__default.default.createElement(
|
|
3113
3114
|
TextDimensionInput,
|
|
3114
3115
|
{
|
|
3115
3116
|
label: "Column 3",
|
|
@@ -3120,7 +3121,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3120
3121
|
}
|
|
3121
3122
|
);
|
|
3122
3123
|
}
|
|
3123
|
-
return /* @__PURE__ */
|
|
3124
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3124
3125
|
TextDimensionInput,
|
|
3125
3126
|
{
|
|
3126
3127
|
label: "Column 1",
|
|
@@ -3129,7 +3130,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3129
3130
|
setIndexValue(0, v);
|
|
3130
3131
|
}
|
|
3131
3132
|
}
|
|
3132
|
-
), /* @__PURE__ */
|
|
3133
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3133
3134
|
TextDimensionInput,
|
|
3134
3135
|
{
|
|
3135
3136
|
label: "Column 2",
|
|
@@ -3144,7 +3145,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3144
3145
|
// src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
|
|
3145
3146
|
function ColumnsContainerPanel({ data, setData }) {
|
|
3146
3147
|
var _a, _b, _c, _d, _e, _f;
|
|
3147
|
-
const [, setErrors] =
|
|
3148
|
+
const [, setErrors] = React62.useState(null);
|
|
3148
3149
|
const updateData = (d) => {
|
|
3149
3150
|
const res = columns_container_props_schema_default2.safeParse(d);
|
|
3150
3151
|
if (res.success) {
|
|
@@ -3154,7 +3155,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3154
3155
|
setErrors(res.error);
|
|
3155
3156
|
}
|
|
3156
3157
|
};
|
|
3157
|
-
return /* @__PURE__ */
|
|
3158
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3158
3159
|
RadioGroupInput,
|
|
3159
3160
|
{
|
|
3160
3161
|
label: t("columns.count", "Number of columns"),
|
|
@@ -3163,9 +3164,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3163
3164
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
3164
3165
|
}
|
|
3165
3166
|
},
|
|
3166
|
-
/* @__PURE__ */
|
|
3167
|
-
/* @__PURE__ */
|
|
3168
|
-
), /* @__PURE__ */
|
|
3167
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
|
|
3168
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
|
|
3169
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3169
3170
|
ColumnWidthsInput,
|
|
3170
3171
|
{
|
|
3171
3172
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -3173,11 +3174,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3173
3174
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
3174
3175
|
}
|
|
3175
3176
|
}
|
|
3176
|
-
), /* @__PURE__ */
|
|
3177
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3177
3178
|
SliderInput,
|
|
3178
3179
|
{
|
|
3179
3180
|
label: t("columns.gap", "Columns gap"),
|
|
3180
|
-
iconLabel: /* @__PURE__ */
|
|
3181
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
3181
3182
|
units: "px",
|
|
3182
3183
|
step: 4,
|
|
3183
3184
|
marks: true,
|
|
@@ -3186,7 +3187,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3186
3187
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
3187
3188
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
3188
3189
|
}
|
|
3189
|
-
), /* @__PURE__ */
|
|
3190
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3190
3191
|
RadioGroupInput,
|
|
3191
3192
|
{
|
|
3192
3193
|
label: t("style.alignment", "Alignment"),
|
|
@@ -3195,10 +3196,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3195
3196
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
3196
3197
|
}
|
|
3197
3198
|
},
|
|
3198
|
-
/* @__PURE__ */
|
|
3199
|
-
/* @__PURE__ */
|
|
3200
|
-
/* @__PURE__ */
|
|
3201
|
-
), /* @__PURE__ */
|
|
3199
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3200
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3201
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3202
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3202
3203
|
MultiStylePropertyPanel,
|
|
3203
3204
|
{
|
|
3204
3205
|
names: ["backgroundColor", "padding"],
|
|
@@ -3217,7 +3218,7 @@ var container_props_schema_default = ContainerPropsSchema3;
|
|
|
3217
3218
|
|
|
3218
3219
|
// src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
|
|
3219
3220
|
function ContainerSidebarPanel({ data, setData }) {
|
|
3220
|
-
const [, setErrors] =
|
|
3221
|
+
const [, setErrors] = React62.useState(null);
|
|
3221
3222
|
const updateData = (d) => {
|
|
3222
3223
|
const res = container_props_schema_default.safeParse(d);
|
|
3223
3224
|
if (res.success) {
|
|
@@ -3227,7 +3228,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3227
3228
|
setErrors(res.error);
|
|
3228
3229
|
}
|
|
3229
3230
|
};
|
|
3230
|
-
return /* @__PURE__ */
|
|
3231
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3231
3232
|
MultiStylePropertyPanel,
|
|
3232
3233
|
{
|
|
3233
3234
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -3238,7 +3239,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3238
3239
|
}
|
|
3239
3240
|
function DividerSidebarPanel({ data, setData }) {
|
|
3240
3241
|
var _a, _b, _c, _d;
|
|
3241
|
-
const [, setErrors] =
|
|
3242
|
+
const [, setErrors] = React62.useState(null);
|
|
3242
3243
|
const updateData = (d) => {
|
|
3243
3244
|
const res = DividerPropsSchema.safeParse(d);
|
|
3244
3245
|
if (res.success) {
|
|
@@ -3250,18 +3251,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3250
3251
|
};
|
|
3251
3252
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
3252
3253
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
3253
|
-
return /* @__PURE__ */
|
|
3254
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3254
3255
|
ColorInput2,
|
|
3255
3256
|
{
|
|
3256
3257
|
label: t("divider.color", "Color"),
|
|
3257
3258
|
defaultValue: lineColor,
|
|
3258
3259
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
3259
3260
|
}
|
|
3260
|
-
), /* @__PURE__ */
|
|
3261
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3261
3262
|
SliderInput,
|
|
3262
3263
|
{
|
|
3263
3264
|
label: t("field.height", "Height"),
|
|
3264
|
-
iconLabel: /* @__PURE__ */
|
|
3265
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3265
3266
|
units: "px",
|
|
3266
3267
|
step: 1,
|
|
3267
3268
|
min: 1,
|
|
@@ -3269,7 +3270,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3269
3270
|
defaultValue: lineHeight,
|
|
3270
3271
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
3271
3272
|
}
|
|
3272
|
-
), /* @__PURE__ */
|
|
3273
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3273
3274
|
MultiStylePropertyPanel,
|
|
3274
3275
|
{
|
|
3275
3276
|
names: ["backgroundColor", "padding"],
|
|
@@ -3309,15 +3310,15 @@ var EmailLayoutPropsSchema2 = zod.z.object({
|
|
|
3309
3310
|
});
|
|
3310
3311
|
var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
3311
3312
|
function BooleanInput({ label, defaultValue, onChange }) {
|
|
3312
|
-
const [value, setValue] =
|
|
3313
|
-
|
|
3313
|
+
const [value, setValue] = React62.useState(defaultValue);
|
|
3314
|
+
React62.useEffect(() => {
|
|
3314
3315
|
setValue(defaultValue);
|
|
3315
3316
|
}, [defaultValue]);
|
|
3316
|
-
return /* @__PURE__ */
|
|
3317
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
3317
3318
|
material.FormControlLabel,
|
|
3318
3319
|
{
|
|
3319
3320
|
label,
|
|
3320
|
-
control: /* @__PURE__ */
|
|
3321
|
+
control: /* @__PURE__ */ React62__default.default.createElement(
|
|
3321
3322
|
material.Switch,
|
|
3322
3323
|
{
|
|
3323
3324
|
checked: value,
|
|
@@ -3334,7 +3335,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3334
3335
|
// src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
|
|
3335
3336
|
function EmailLayoutSidebarFields({ data, setData }) {
|
|
3336
3337
|
var _a, _b, _c, _d, _e, _f;
|
|
3337
|
-
const [, setErrors] =
|
|
3338
|
+
const [, setErrors] = React62.useState(null);
|
|
3338
3339
|
const updateData = (d) => {
|
|
3339
3340
|
const res = email_layout_props_schema_default.safeParse(d);
|
|
3340
3341
|
if (res.success) {
|
|
@@ -3345,38 +3346,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3345
3346
|
}
|
|
3346
3347
|
};
|
|
3347
3348
|
const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
|
|
3348
|
-
return /* @__PURE__ */
|
|
3349
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3349
3350
|
BooleanInput,
|
|
3350
3351
|
{
|
|
3351
3352
|
label: t("global.disable-backdrop", "Disable backdrop"),
|
|
3352
3353
|
defaultValue: backdropDisabled,
|
|
3353
3354
|
onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
|
|
3354
3355
|
}
|
|
3355
|
-
), !backdropDisabled && /* @__PURE__ */
|
|
3356
|
+
), !backdropDisabled && /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
3356
3357
|
ColorInput2,
|
|
3357
3358
|
{
|
|
3358
3359
|
label: t("global.backdrop-color", "Backdrop color"),
|
|
3359
3360
|
defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
|
|
3360
3361
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
3361
3362
|
}
|
|
3362
|
-
), /* @__PURE__ */
|
|
3363
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3363
3364
|
ColorInput2,
|
|
3364
3365
|
{
|
|
3365
3366
|
label: t("global.canvas-color", "Canvas color"),
|
|
3366
3367
|
defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
|
|
3367
3368
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
3368
3369
|
}
|
|
3369
|
-
), /* @__PURE__ */
|
|
3370
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3370
3371
|
NullableColorInput,
|
|
3371
3372
|
{
|
|
3372
3373
|
label: t("global.canvas-border-color", "Canvas border color"),
|
|
3373
3374
|
defaultValue: (_d = data.borderColor) != null ? _d : null,
|
|
3374
3375
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
3375
3376
|
}
|
|
3376
|
-
), /* @__PURE__ */
|
|
3377
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3377
3378
|
SliderInput,
|
|
3378
3379
|
{
|
|
3379
|
-
iconLabel: /* @__PURE__ */
|
|
3380
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
3380
3381
|
units: "px",
|
|
3381
3382
|
step: 4,
|
|
3382
3383
|
marks: true,
|
|
@@ -3386,14 +3387,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3386
3387
|
defaultValue: (_e = data.borderRadius) != null ? _e : 0,
|
|
3387
3388
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
3388
3389
|
}
|
|
3389
|
-
)), /* @__PURE__ */
|
|
3390
|
+
)), /* @__PURE__ */ React62__default.default.createElement(
|
|
3390
3391
|
NullableFontFamily,
|
|
3391
3392
|
{
|
|
3392
3393
|
label: t("style.font-family", "Font family"),
|
|
3393
3394
|
defaultValue: "MODERN_SANS",
|
|
3394
3395
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
3395
3396
|
}
|
|
3396
|
-
), /* @__PURE__ */
|
|
3397
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3397
3398
|
ColorInput2,
|
|
3398
3399
|
{
|
|
3399
3400
|
label: t("style.text-color", "Text color"),
|
|
@@ -3404,7 +3405,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3404
3405
|
}
|
|
3405
3406
|
function HeadingSidebarPanel({ data, setData }) {
|
|
3406
3407
|
var _a, _b, _c, _d;
|
|
3407
|
-
const [, setErrors] =
|
|
3408
|
+
const [, setErrors] = React62.useState(null);
|
|
3408
3409
|
const updateData = (d) => {
|
|
3409
3410
|
const res = HeadingPropsSchema.safeParse(d);
|
|
3410
3411
|
if (res.success) {
|
|
@@ -3414,7 +3415,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3414
3415
|
setErrors(res.error);
|
|
3415
3416
|
}
|
|
3416
3417
|
};
|
|
3417
|
-
return /* @__PURE__ */
|
|
3418
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3418
3419
|
TextInput,
|
|
3419
3420
|
{
|
|
3420
3421
|
label: t("field.content", "Content"),
|
|
@@ -3424,7 +3425,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3424
3425
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
3425
3426
|
}
|
|
3426
3427
|
}
|
|
3427
|
-
), /* @__PURE__ */
|
|
3428
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3428
3429
|
RadioGroupInput,
|
|
3429
3430
|
{
|
|
3430
3431
|
label: t("field.level", "Level"),
|
|
@@ -3433,10 +3434,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3433
3434
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
3434
3435
|
}
|
|
3435
3436
|
},
|
|
3436
|
-
/* @__PURE__ */
|
|
3437
|
-
/* @__PURE__ */
|
|
3438
|
-
/* @__PURE__ */
|
|
3439
|
-
), /* @__PURE__ */
|
|
3437
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
|
|
3438
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
|
|
3439
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
|
|
3440
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3440
3441
|
MultiStylePropertyPanel,
|
|
3441
3442
|
{
|
|
3442
3443
|
names: [
|
|
@@ -3456,7 +3457,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3456
3457
|
}
|
|
3457
3458
|
function HtmlSidebarPanel({ data, setData }) {
|
|
3458
3459
|
var _a, _b;
|
|
3459
|
-
const [, setErrors] =
|
|
3460
|
+
const [, setErrors] = React62.useState(null);
|
|
3460
3461
|
const updateData = (d) => {
|
|
3461
3462
|
const res = HtmlPropsSchema.safeParse(d);
|
|
3462
3463
|
if (res.success) {
|
|
@@ -3466,7 +3467,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3466
3467
|
setErrors(res.error);
|
|
3467
3468
|
}
|
|
3468
3469
|
};
|
|
3469
|
-
return /* @__PURE__ */
|
|
3470
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3470
3471
|
TextInput,
|
|
3471
3472
|
{
|
|
3472
3473
|
label: t("field.content", "Content"),
|
|
@@ -3474,7 +3475,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3474
3475
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
3475
3476
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
3476
3477
|
}
|
|
3477
|
-
), /* @__PURE__ */
|
|
3478
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3478
3479
|
MultiStylePropertyPanel,
|
|
3479
3480
|
{
|
|
3480
3481
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -3485,10 +3486,10 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3485
3486
|
}
|
|
3486
3487
|
function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
3487
3488
|
const { loadImages, deleteImage } = useImageCallbacks();
|
|
3488
|
-
const [images, setImages] =
|
|
3489
|
-
const [error, setError] =
|
|
3490
|
-
const [query, setQuery] =
|
|
3491
|
-
const [busy, setBusy] =
|
|
3489
|
+
const [images, setImages] = React62.useState(null);
|
|
3490
|
+
const [error, setError] = React62.useState(null);
|
|
3491
|
+
const [query, setQuery] = React62.useState("");
|
|
3492
|
+
const [busy, setBusy] = React62.useState(false);
|
|
3492
3493
|
const refresh = () => __async(null, null, function* () {
|
|
3493
3494
|
if (!loadImages) return;
|
|
3494
3495
|
setBusy(true);
|
|
@@ -3502,13 +3503,13 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3502
3503
|
setBusy(false);
|
|
3503
3504
|
}
|
|
3504
3505
|
});
|
|
3505
|
-
|
|
3506
|
+
React62.useEffect(() => {
|
|
3506
3507
|
if (open) {
|
|
3507
3508
|
setQuery("");
|
|
3508
3509
|
void refresh();
|
|
3509
3510
|
}
|
|
3510
3511
|
}, [open]);
|
|
3511
|
-
const filtered =
|
|
3512
|
+
const filtered = React62.useMemo(() => {
|
|
3512
3513
|
if (!images) return null;
|
|
3513
3514
|
const q = query.trim().toLowerCase();
|
|
3514
3515
|
if (!q) return images;
|
|
@@ -3531,7 +3532,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3531
3532
|
setBusy(false);
|
|
3532
3533
|
}
|
|
3533
3534
|
});
|
|
3534
|
-
return /* @__PURE__ */
|
|
3535
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React62__default.default.createElement(material.DialogTitle, null, "Image library"), /* @__PURE__ */ React62__default.default.createElement(material.DialogContent, { dividers: true }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3535
3536
|
material.TextField,
|
|
3536
3537
|
{
|
|
3537
3538
|
fullWidth: true,
|
|
@@ -3541,11 +3542,11 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3541
3542
|
onChange: (e) => setQuery(e.target.value),
|
|
3542
3543
|
autoFocus: true,
|
|
3543
3544
|
InputProps: {
|
|
3544
|
-
startAdornment: /* @__PURE__ */
|
|
3545
|
+
startAdornment: /* @__PURE__ */ React62__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
3545
3546
|
},
|
|
3546
3547
|
sx: { mb: 2 }
|
|
3547
3548
|
}
|
|
3548
|
-
), error && /* @__PURE__ */
|
|
3549
|
+
), error && /* @__PURE__ */ React62__default.default.createElement(material.Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React62__default.default.createElement(material.Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React62__default.default.createElement(material.CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React62__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__ */ React62__default.default.createElement(
|
|
3549
3550
|
material.Box,
|
|
3550
3551
|
{
|
|
3551
3552
|
sx: {
|
|
@@ -3554,7 +3555,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3554
3555
|
gap: 1.5
|
|
3555
3556
|
}
|
|
3556
3557
|
},
|
|
3557
|
-
filtered.map((img) => /* @__PURE__ */
|
|
3558
|
+
filtered.map((img) => /* @__PURE__ */ React62__default.default.createElement(
|
|
3558
3559
|
ImageTile,
|
|
3559
3560
|
{
|
|
3560
3561
|
key: img.url,
|
|
@@ -3563,7 +3564,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3563
3564
|
onDelete: deleteImage ? () => handleDelete(img.url) : void 0
|
|
3564
3565
|
}
|
|
3565
3566
|
))
|
|
3566
|
-
)), /* @__PURE__ */
|
|
3567
|
+
)), /* @__PURE__ */ React62__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React62__default.default.createElement(material.Button, { onClick: onClose }, "Close")));
|
|
3567
3568
|
}
|
|
3568
3569
|
function ImageTile({
|
|
3569
3570
|
image,
|
|
@@ -3573,7 +3574,7 @@ function ImageTile({
|
|
|
3573
3574
|
var _a, _b;
|
|
3574
3575
|
const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
|
|
3575
3576
|
const label = image.alt || image.url.split("/").pop() || "image";
|
|
3576
|
-
return /* @__PURE__ */
|
|
3577
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
3577
3578
|
material.Box,
|
|
3578
3579
|
{
|
|
3579
3580
|
sx: {
|
|
@@ -3589,7 +3590,7 @@ function ImageTile({
|
|
|
3589
3590
|
},
|
|
3590
3591
|
onClick: onPick
|
|
3591
3592
|
},
|
|
3592
|
-
/* @__PURE__ */
|
|
3593
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
3593
3594
|
material.Box,
|
|
3594
3595
|
{
|
|
3595
3596
|
component: "img",
|
|
@@ -3598,8 +3599,8 @@ function ImageTile({
|
|
|
3598
3599
|
sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
|
|
3599
3600
|
}
|
|
3600
3601
|
),
|
|
3601
|
-
/* @__PURE__ */
|
|
3602
|
-
onDelete && /* @__PURE__ */
|
|
3602
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
|
|
3603
|
+
onDelete && /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3603
3604
|
material.IconButton,
|
|
3604
3605
|
{
|
|
3605
3606
|
size: "small",
|
|
@@ -3619,7 +3620,7 @@ function ImageTile({
|
|
|
3619
3620
|
},
|
|
3620
3621
|
"aria-label": "Delete image"
|
|
3621
3622
|
},
|
|
3622
|
-
/* @__PURE__ */
|
|
3623
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
3623
3624
|
))
|
|
3624
3625
|
);
|
|
3625
3626
|
}
|
|
@@ -3631,12 +3632,12 @@ function isHttpUrl(value) {
|
|
|
3631
3632
|
}
|
|
3632
3633
|
function ImageSidebarPanel({ data, setData }) {
|
|
3633
3634
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
3634
|
-
const [, setErrors] =
|
|
3635
|
+
const [, setErrors] = React62.useState(null);
|
|
3635
3636
|
const { uploadImage, loadImages } = useImageCallbacks();
|
|
3636
|
-
const fileInputRef =
|
|
3637
|
-
const [uploading, setUploading] =
|
|
3638
|
-
const [uploadError, setUploadError] =
|
|
3639
|
-
const [libraryOpen, setLibraryOpen] =
|
|
3637
|
+
const fileInputRef = React62.useRef(null);
|
|
3638
|
+
const [uploading, setUploading] = React62.useState(false);
|
|
3639
|
+
const [uploadError, setUploadError] = React62.useState(null);
|
|
3640
|
+
const [libraryOpen, setLibraryOpen] = React62.useState(false);
|
|
3640
3641
|
const updateData = (d) => {
|
|
3641
3642
|
const res = ImagePropsSchema.safeParse(d);
|
|
3642
3643
|
if (res.success) {
|
|
@@ -3672,13 +3673,13 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3672
3673
|
});
|
|
3673
3674
|
const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
|
|
3674
3675
|
const showHttpWarning = isHttpUrl(url);
|
|
3675
|
-
return /* @__PURE__ */
|
|
3676
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
3676
3677
|
material.Button,
|
|
3677
3678
|
{
|
|
3678
3679
|
fullWidth: true,
|
|
3679
3680
|
variant: "outlined",
|
|
3680
3681
|
size: "small",
|
|
3681
|
-
startIcon: uploading ? /* @__PURE__ */
|
|
3682
|
+
startIcon: uploading ? /* @__PURE__ */ React62__default.default.createElement(material.CircularProgress, { size: 14 }) : /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.CloudUploadOutlined, { fontSize: "small" }),
|
|
3682
3683
|
disabled: uploading,
|
|
3683
3684
|
onClick: () => {
|
|
3684
3685
|
var _a2;
|
|
@@ -3686,7 +3687,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3686
3687
|
}
|
|
3687
3688
|
},
|
|
3688
3689
|
uploading ? t("image.uploading", "Uploading\u2026") : t("image.upload", "Upload")
|
|
3689
|
-
), /* @__PURE__ */
|
|
3690
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3690
3691
|
"input",
|
|
3691
3692
|
{
|
|
3692
3693
|
ref: fileInputRef,
|
|
@@ -3700,17 +3701,17 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3700
3701
|
if (file) yield handleFile(file);
|
|
3701
3702
|
})
|
|
3702
3703
|
}
|
|
3703
|
-
)), loadImages && /* @__PURE__ */
|
|
3704
|
+
)), loadImages && /* @__PURE__ */ React62__default.default.createElement(
|
|
3704
3705
|
material.Button,
|
|
3705
3706
|
{
|
|
3706
3707
|
fullWidth: true,
|
|
3707
3708
|
variant: "outlined",
|
|
3708
3709
|
size: "small",
|
|
3709
|
-
startIcon: /* @__PURE__ */
|
|
3710
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.CollectionsOutlined, { fontSize: "small" }),
|
|
3710
3711
|
onClick: () => setLibraryOpen(true)
|
|
3711
3712
|
},
|
|
3712
3713
|
t("image.library", "Library")
|
|
3713
|
-
)), uploadError && /* @__PURE__ */
|
|
3714
|
+
)), uploadError && /* @__PURE__ */ React62__default.default.createElement(material.Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React62__default.default.createElement(
|
|
3714
3715
|
TextInput,
|
|
3715
3716
|
{
|
|
3716
3717
|
label: t("image.source-url", "Source URL"),
|
|
@@ -3720,14 +3721,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3720
3721
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
|
|
3721
3722
|
}
|
|
3722
3723
|
}
|
|
3723
|
-
), showHttpWarning && /* @__PURE__ */
|
|
3724
|
+
), showHttpWarning && /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { fontSize: 12, color: "warning.dark" } }, t("image.http-warning", "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery."))), /* @__PURE__ */ React62__default.default.createElement(
|
|
3724
3725
|
TextInput,
|
|
3725
3726
|
{
|
|
3726
3727
|
label: t("image.alt-text", "Alt text"),
|
|
3727
3728
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
3728
3729
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
3729
3730
|
}
|
|
3730
|
-
), /* @__PURE__ */
|
|
3731
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3731
3732
|
TextInput,
|
|
3732
3733
|
{
|
|
3733
3734
|
label: t("image.link-href", "Click through URL"),
|
|
@@ -3737,38 +3738,38 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3737
3738
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
3738
3739
|
}
|
|
3739
3740
|
}
|
|
3740
|
-
), /* @__PURE__ */
|
|
3741
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3741
3742
|
TextDimensionInput,
|
|
3742
3743
|
{
|
|
3743
3744
|
label: t("field.width", "Width"),
|
|
3744
3745
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
3745
3746
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
3746
3747
|
}
|
|
3747
|
-
), /* @__PURE__ */
|
|
3748
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3748
3749
|
TextDimensionInput,
|
|
3749
3750
|
{
|
|
3750
3751
|
label: t("field.height", "Height"),
|
|
3751
3752
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
3752
3753
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
3753
3754
|
}
|
|
3754
|
-
)), /* @__PURE__ */
|
|
3755
|
+
)), /* @__PURE__ */ React62__default.default.createElement(
|
|
3755
3756
|
RadioGroupInput,
|
|
3756
3757
|
{
|
|
3757
3758
|
label: t("style.alignment", "Alignment"),
|
|
3758
3759
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
3759
3760
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
3760
3761
|
},
|
|
3761
|
-
/* @__PURE__ */
|
|
3762
|
-
/* @__PURE__ */
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
), /* @__PURE__ */
|
|
3762
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3763
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3764
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3765
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3765
3766
|
MultiStylePropertyPanel,
|
|
3766
3767
|
{
|
|
3767
3768
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
3768
3769
|
value: data.style,
|
|
3769
3770
|
onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
|
|
3770
3771
|
}
|
|
3771
|
-
), loadImages && /* @__PURE__ */
|
|
3772
|
+
), loadImages && /* @__PURE__ */ React62__default.default.createElement(
|
|
3772
3773
|
ImageLibraryDialog,
|
|
3773
3774
|
{
|
|
3774
3775
|
open: libraryOpen,
|
|
@@ -3782,7 +3783,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3782
3783
|
}
|
|
3783
3784
|
function SignatureSidebarPanel({ data, setData }) {
|
|
3784
3785
|
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;
|
|
3785
|
-
const [, setErrors] =
|
|
3786
|
+
const [, setErrors] = React62.useState(null);
|
|
3786
3787
|
const updateData = (d) => {
|
|
3787
3788
|
const res = SignaturePropsSchema.safeParse(d);
|
|
3788
3789
|
if (res.success) {
|
|
@@ -3807,74 +3808,74 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3807
3808
|
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3808
3809
|
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3809
3810
|
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3810
|
-
return /* @__PURE__ */
|
|
3811
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3811
3812
|
TextInput,
|
|
3812
3813
|
{
|
|
3813
3814
|
label: t("signature.greeting", "Greeting"),
|
|
3814
3815
|
defaultValue: greeting,
|
|
3815
3816
|
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3816
3817
|
}
|
|
3817
|
-
), /* @__PURE__ */
|
|
3818
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3818
3819
|
TextInput,
|
|
3819
3820
|
{
|
|
3820
3821
|
label: t("signature.name", "Name"),
|
|
3821
3822
|
defaultValue: name,
|
|
3822
3823
|
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3823
3824
|
}
|
|
3824
|
-
), /* @__PURE__ */
|
|
3825
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3825
3826
|
TextInput,
|
|
3826
3827
|
{
|
|
3827
3828
|
label: t("signature.title", "Title"),
|
|
3828
3829
|
defaultValue: title,
|
|
3829
3830
|
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3830
3831
|
}
|
|
3831
|
-
), /* @__PURE__ */
|
|
3832
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3832
3833
|
TextInput,
|
|
3833
3834
|
{
|
|
3834
3835
|
label: t("signature.company", "Company"),
|
|
3835
3836
|
defaultValue: company,
|
|
3836
3837
|
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3837
3838
|
}
|
|
3838
|
-
), /* @__PURE__ */
|
|
3839
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3839
3840
|
TextInput,
|
|
3840
3841
|
{
|
|
3841
3842
|
label: t("signature.address", "Address"),
|
|
3842
3843
|
defaultValue: address,
|
|
3843
3844
|
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3844
3845
|
}
|
|
3845
|
-
), /* @__PURE__ */
|
|
3846
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3846
3847
|
TextInput,
|
|
3847
3848
|
{
|
|
3848
3849
|
label: t("signature.email", "Email"),
|
|
3849
3850
|
defaultValue: email,
|
|
3850
3851
|
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3851
3852
|
}
|
|
3852
|
-
), /* @__PURE__ */
|
|
3853
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3853
3854
|
TextInput,
|
|
3854
3855
|
{
|
|
3855
3856
|
label: t("signature.phone", "Phone"),
|
|
3856
3857
|
defaultValue: phone,
|
|
3857
3858
|
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3858
3859
|
}
|
|
3859
|
-
), /* @__PURE__ */
|
|
3860
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3860
3861
|
TextInput,
|
|
3861
3862
|
{
|
|
3862
3863
|
label: t("signature.website", "Website"),
|
|
3863
3864
|
defaultValue: website,
|
|
3864
3865
|
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3865
3866
|
}
|
|
3866
|
-
), /* @__PURE__ */
|
|
3867
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3867
3868
|
TextInput,
|
|
3868
3869
|
{
|
|
3869
3870
|
label: t("signature.image-url", "Image URL"),
|
|
3870
3871
|
defaultValue: imageUrl,
|
|
3871
3872
|
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3872
3873
|
}
|
|
3873
|
-
), /* @__PURE__ */
|
|
3874
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3874
3875
|
SliderInput,
|
|
3875
3876
|
{
|
|
3876
3877
|
label: t("signature.image-size", "Image size"),
|
|
3877
|
-
iconLabel: /* @__PURE__ */
|
|
3878
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3878
3879
|
units: "px",
|
|
3879
3880
|
step: 4,
|
|
3880
3881
|
min: 32,
|
|
@@ -3882,47 +3883,47 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3882
3883
|
defaultValue: imageSize,
|
|
3883
3884
|
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3884
3885
|
}
|
|
3885
|
-
), /* @__PURE__ */
|
|
3886
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3886
3887
|
RadioGroupInput,
|
|
3887
3888
|
{
|
|
3888
3889
|
label: t("signature.image-shape", "Image shape"),
|
|
3889
3890
|
defaultValue: imageShape,
|
|
3890
3891
|
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3891
3892
|
},
|
|
3892
|
-
/* @__PURE__ */
|
|
3893
|
-
/* @__PURE__ */
|
|
3894
|
-
/* @__PURE__ */
|
|
3895
|
-
), /* @__PURE__ */
|
|
3893
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "circle" }, t("signature.shape.circle", "Circle")),
|
|
3894
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "square" }, t("signature.shape.square", "Square")),
|
|
3895
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "rounded" }, t("signature.shape.rounded", "Rounded"))
|
|
3896
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3896
3897
|
RadioGroupInput,
|
|
3897
3898
|
{
|
|
3898
3899
|
label: t("signature.layout", "Layout"),
|
|
3899
3900
|
defaultValue: layout,
|
|
3900
3901
|
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3901
3902
|
},
|
|
3902
|
-
/* @__PURE__ */
|
|
3903
|
-
/* @__PURE__ */
|
|
3904
|
-
), /* @__PURE__ */
|
|
3903
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "horizontal" }, t("signature.layout.horizontal", "Horizontal")),
|
|
3904
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "vertical" }, t("signature.layout.vertical", "Vertical"))
|
|
3905
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3905
3906
|
ColorInput2,
|
|
3906
3907
|
{
|
|
3907
3908
|
label: t("signature.name-color", "Name color"),
|
|
3908
3909
|
defaultValue: nameColor,
|
|
3909
3910
|
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3910
3911
|
}
|
|
3911
|
-
), /* @__PURE__ */
|
|
3912
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3912
3913
|
ColorInput2,
|
|
3913
3914
|
{
|
|
3914
3915
|
label: t("style.text-color", "Text color"),
|
|
3915
3916
|
defaultValue: textColor,
|
|
3916
3917
|
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3917
3918
|
}
|
|
3918
|
-
), /* @__PURE__ */
|
|
3919
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3919
3920
|
ColorInput2,
|
|
3920
3921
|
{
|
|
3921
3922
|
label: t("signature.link-color", "Link color"),
|
|
3922
3923
|
defaultValue: linkColor,
|
|
3923
3924
|
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3924
3925
|
}
|
|
3925
|
-
), /* @__PURE__ */
|
|
3926
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3926
3927
|
MultiStylePropertyPanel,
|
|
3927
3928
|
{
|
|
3928
3929
|
names: ["backgroundColor", "fontFamily", "padding"],
|
|
@@ -3933,7 +3934,7 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3933
3934
|
}
|
|
3934
3935
|
function SpacerSidebarPanel({ data, setData }) {
|
|
3935
3936
|
var _a, _b;
|
|
3936
|
-
const [, setErrors] =
|
|
3937
|
+
const [, setErrors] = React62.useState(null);
|
|
3937
3938
|
const updateData = (d) => {
|
|
3938
3939
|
const res = SpacerPropsSchema.safeParse(d);
|
|
3939
3940
|
if (res.success) {
|
|
@@ -3943,11 +3944,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3943
3944
|
setErrors(res.error);
|
|
3944
3945
|
}
|
|
3945
3946
|
};
|
|
3946
|
-
return /* @__PURE__ */
|
|
3947
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3947
3948
|
SliderInput,
|
|
3948
3949
|
{
|
|
3949
3950
|
label: t("field.height", "Height"),
|
|
3950
|
-
iconLabel: /* @__PURE__ */
|
|
3951
|
+
iconLabel: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3951
3952
|
units: "px",
|
|
3952
3953
|
step: 4,
|
|
3953
3954
|
min: 4,
|
|
@@ -3959,7 +3960,7 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3959
3960
|
}
|
|
3960
3961
|
function TextSidebarPanel({ data, setData }) {
|
|
3961
3962
|
var _a, _b, _c, _d;
|
|
3962
|
-
const [, setErrors] =
|
|
3963
|
+
const [, setErrors] = React62.useState(null);
|
|
3963
3964
|
const updateData = (d) => {
|
|
3964
3965
|
const res = TextPropsSchema.safeParse(d);
|
|
3965
3966
|
if (res.success) {
|
|
@@ -3969,7 +3970,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3969
3970
|
setErrors(res.error);
|
|
3970
3971
|
}
|
|
3971
3972
|
};
|
|
3972
|
-
return /* @__PURE__ */
|
|
3973
|
+
return /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
3973
3974
|
TextInput,
|
|
3974
3975
|
{
|
|
3975
3976
|
label: t("field.content", "Content"),
|
|
@@ -3977,14 +3978,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3977
3978
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3978
3979
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3979
3980
|
}
|
|
3980
|
-
), /* @__PURE__ */
|
|
3981
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3981
3982
|
BooleanInput,
|
|
3982
3983
|
{
|
|
3983
3984
|
label: t("field.markdown", "Markdown"),
|
|
3984
3985
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3985
3986
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3986
3987
|
}
|
|
3987
|
-
), /* @__PURE__ */
|
|
3988
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
3988
3989
|
MultiStylePropertyPanel,
|
|
3989
3990
|
{
|
|
3990
3991
|
names: [
|
|
@@ -4006,71 +4007,71 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
4006
4007
|
|
|
4007
4008
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
4008
4009
|
function renderMessage(val) {
|
|
4009
|
-
return /* @__PURE__ */
|
|
4010
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
|
|
4010
4011
|
}
|
|
4011
4012
|
function ConfigurationPanel() {
|
|
4012
4013
|
const document2 = useDocument();
|
|
4013
4014
|
const selectedBlockId = useSelectedBlockId();
|
|
4014
4015
|
if (!selectedBlockId) {
|
|
4015
|
-
return renderMessage("Click on a block to inspect.");
|
|
4016
|
+
return renderMessage(t("inspect.hint", "Click on a block to inspect."));
|
|
4016
4017
|
}
|
|
4017
4018
|
const block = document2[selectedBlockId];
|
|
4018
4019
|
if (!block) {
|
|
4019
|
-
return renderMessage(
|
|
4020
|
+
return renderMessage(t("inspect.not-found", "Block not found. Click on a block to reset."));
|
|
4020
4021
|
}
|
|
4021
4022
|
const setBlock = (conf) => setDocument({ [selectedBlockId]: conf });
|
|
4022
4023
|
const { data, type } = block;
|
|
4023
4024
|
switch (type) {
|
|
4024
4025
|
case "Avatar":
|
|
4025
|
-
return /* @__PURE__ */
|
|
4026
|
+
return /* @__PURE__ */ React62__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4026
4027
|
case "Button":
|
|
4027
|
-
return /* @__PURE__ */
|
|
4028
|
+
return /* @__PURE__ */ React62__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4028
4029
|
case "ColumnsContainer":
|
|
4029
|
-
return /* @__PURE__ */
|
|
4030
|
+
return /* @__PURE__ */ React62__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4030
4031
|
case "Container":
|
|
4031
|
-
return /* @__PURE__ */
|
|
4032
|
+
return /* @__PURE__ */ React62__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4032
4033
|
case "Divider":
|
|
4033
|
-
return /* @__PURE__ */
|
|
4034
|
+
return /* @__PURE__ */ React62__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4034
4035
|
case "Heading":
|
|
4035
|
-
return /* @__PURE__ */
|
|
4036
|
+
return /* @__PURE__ */ React62__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4036
4037
|
case "Html":
|
|
4037
|
-
return /* @__PURE__ */
|
|
4038
|
+
return /* @__PURE__ */ React62__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4038
4039
|
case "Image":
|
|
4039
|
-
return /* @__PURE__ */
|
|
4040
|
+
return /* @__PURE__ */ React62__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4040
4041
|
case "EmailLayout":
|
|
4041
|
-
return /* @__PURE__ */
|
|
4042
|
+
return /* @__PURE__ */ React62__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4042
4043
|
case "Spacer":
|
|
4043
|
-
return /* @__PURE__ */
|
|
4044
|
+
return /* @__PURE__ */ React62__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4044
4045
|
case "Signature":
|
|
4045
|
-
return /* @__PURE__ */
|
|
4046
|
+
return /* @__PURE__ */ React62__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4046
4047
|
case "Text":
|
|
4047
|
-
return /* @__PURE__ */
|
|
4048
|
+
return /* @__PURE__ */ React62__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4048
4049
|
default:
|
|
4049
|
-
return /* @__PURE__ */
|
|
4050
|
+
return /* @__PURE__ */ React62__default.default.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
4050
4051
|
}
|
|
4051
4052
|
}
|
|
4052
4053
|
function StylesPanel() {
|
|
4053
4054
|
const block = useDocument().root;
|
|
4054
4055
|
if (!block) {
|
|
4055
|
-
return /* @__PURE__ */
|
|
4056
|
+
return /* @__PURE__ */ React62__default.default.createElement("p", null, "Block not found");
|
|
4056
4057
|
}
|
|
4057
4058
|
const { data, type } = block;
|
|
4058
4059
|
if (type !== "EmailLayout") {
|
|
4059
4060
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
4060
4061
|
}
|
|
4061
|
-
return /* @__PURE__ */
|
|
4062
|
+
return /* @__PURE__ */ React62__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
4062
4063
|
}
|
|
4063
4064
|
function TemplateDownloadButton() {
|
|
4064
4065
|
const doc = useDocument();
|
|
4065
|
-
const href =
|
|
4066
|
+
const href = React62.useMemo(() => {
|
|
4066
4067
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
4067
4068
|
}, [doc]);
|
|
4068
|
-
return /* @__PURE__ */
|
|
4069
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4069
4070
|
material.Button,
|
|
4070
4071
|
{
|
|
4071
4072
|
variant: "outlined",
|
|
4072
4073
|
color: "primary",
|
|
4073
|
-
startIcon: /* @__PURE__ */
|
|
4074
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
|
|
4074
4075
|
href,
|
|
4075
4076
|
download: "emailTemplate.json",
|
|
4076
4077
|
fullWidth: true
|
|
@@ -4096,7 +4097,7 @@ function TemplatePanel({
|
|
|
4096
4097
|
const persistenceEnabled = usePersistenceEnabled();
|
|
4097
4098
|
const workspaceBackground = useWorkspaceBackground();
|
|
4098
4099
|
const handleDelete = () => {
|
|
4099
|
-
if (!currentTemplateId || !window.confirm("Are you sure you want to delete this template?")) {
|
|
4100
|
+
if (!currentTemplateId || !window.confirm(t("settings.delete-confirm", "Are you sure you want to delete this template?"))) {
|
|
4100
4101
|
return;
|
|
4101
4102
|
}
|
|
4102
4103
|
if (deleteTemplate) {
|
|
@@ -4109,10 +4110,10 @@ function TemplatePanel({
|
|
|
4109
4110
|
if (!currentTemplateName || !document2) return;
|
|
4110
4111
|
if (copyTemplate) {
|
|
4111
4112
|
copyTemplate(`${currentTemplateName} (Copy)`, document2);
|
|
4112
|
-
window.alert("Template copied successfully!");
|
|
4113
|
+
window.alert(t("settings.copied", "Template copied successfully!"));
|
|
4113
4114
|
}
|
|
4114
4115
|
};
|
|
4115
|
-
const workspaceToggle = /* @__PURE__ */
|
|
4116
|
+
const workspaceToggle = /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Editor appearance" }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 1 }, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary" } }, t("settings.workspace-background", "Workspace background")), /* @__PURE__ */ React62__default.default.createElement(
|
|
4116
4117
|
material.ToggleButtonGroup,
|
|
4117
4118
|
{
|
|
4118
4119
|
value: workspaceBackground,
|
|
@@ -4120,13 +4121,13 @@ function TemplatePanel({
|
|
|
4120
4121
|
size: "small",
|
|
4121
4122
|
onChange: (_, v) => v && setWorkspaceBackground(v)
|
|
4122
4123
|
},
|
|
4123
|
-
/* @__PURE__ */
|
|
4124
|
-
/* @__PURE__ */
|
|
4125
|
-
), /* @__PURE__ */
|
|
4124
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "checkerboard", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.GridOnOutlined, { fontSize: "small" }), t("settings.checkerboard", "Checkerboard")),
|
|
4125
|
+
/* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "solid", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SquareOutlined, { fontSize: "small" }), t("settings.solid", "Solid"))
|
|
4126
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled" } }, t("settings.editor-only-hint", "Editor-only \u2014 never reaches the rendered email."))));
|
|
4126
4127
|
if (!currentTemplateId) {
|
|
4127
|
-
return /* @__PURE__ */
|
|
4128
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Template" }, t("settings.no-template", "No template selected")), workspaceToggle);
|
|
4128
4129
|
}
|
|
4129
|
-
return /* @__PURE__ */
|
|
4130
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Details" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4130
4131
|
DetailsEditor,
|
|
4131
4132
|
{
|
|
4132
4133
|
templateId: currentTemplateId,
|
|
@@ -4140,7 +4141,7 @@ function TemplatePanel({
|
|
|
4140
4141
|
setCurrentTemplateTags(tags);
|
|
4141
4142
|
})
|
|
4142
4143
|
}
|
|
4143
|
-
)), /* @__PURE__ */
|
|
4144
|
+
)), /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React62__default.default.createElement(
|
|
4144
4145
|
material.Typography,
|
|
4145
4146
|
{
|
|
4146
4147
|
variant: "body2",
|
|
@@ -4152,41 +4153,41 @@ function TemplatePanel({
|
|
|
4152
4153
|
fontSize: "0.8rem"
|
|
4153
4154
|
}
|
|
4154
4155
|
},
|
|
4155
|
-
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
4156
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
4156
|
+
t("settings.save-disabled", "Save functionality is disabled. To enable saving, provide the necessary callback functions.")
|
|
4157
|
+
), persistenceEnabled && /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
4157
4158
|
material.Button,
|
|
4158
4159
|
{
|
|
4159
4160
|
variant: "outlined",
|
|
4160
4161
|
color: "primary",
|
|
4161
|
-
startIcon: /* @__PURE__ */
|
|
4162
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
|
|
4162
4163
|
onClick: handleCopyToSamples,
|
|
4163
4164
|
fullWidth: true,
|
|
4164
4165
|
disabled: !copyTemplate
|
|
4165
4166
|
},
|
|
4166
|
-
"Save as Sample Template"
|
|
4167
|
-
), /* @__PURE__ */
|
|
4167
|
+
t("settings.save-as-sample", "Save as Sample Template")
|
|
4168
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
4168
4169
|
material.Button,
|
|
4169
4170
|
{
|
|
4170
4171
|
variant: "outlined",
|
|
4171
4172
|
color: "error",
|
|
4172
|
-
startIcon: /* @__PURE__ */
|
|
4173
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DeleteOutlined, null),
|
|
4173
4174
|
onClick: handleDelete,
|
|
4174
4175
|
fullWidth: true,
|
|
4175
4176
|
disabled: !deleteTemplate
|
|
4176
4177
|
},
|
|
4177
|
-
"Delete Template"
|
|
4178
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
4178
|
+
t("settings.delete", "Delete Template")
|
|
4179
|
+
)))), persistenceEnabled && /* @__PURE__ */ React62__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React62__default.default.createElement(TemplateDownloadButton, null))), workspaceToggle);
|
|
4179
4180
|
}
|
|
4180
4181
|
function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }) {
|
|
4181
|
-
const [name, setName] =
|
|
4182
|
-
const [tags, setTags] =
|
|
4183
|
-
const [tagInput, setTagInput] =
|
|
4184
|
-
const [saving, setSaving] =
|
|
4185
|
-
const [justSaved, setJustSaved] =
|
|
4186
|
-
|
|
4182
|
+
const [name, setName] = React62.useState(currentName);
|
|
4183
|
+
const [tags, setTags] = React62.useState(currentTags);
|
|
4184
|
+
const [tagInput, setTagInput] = React62.useState("");
|
|
4185
|
+
const [saving, setSaving] = React62.useState(false);
|
|
4186
|
+
const [justSaved, setJustSaved] = React62.useState(false);
|
|
4187
|
+
React62.useEffect(() => {
|
|
4187
4188
|
setName(currentName);
|
|
4188
4189
|
}, [templateId, currentName]);
|
|
4189
|
-
|
|
4190
|
+
React62.useEffect(() => {
|
|
4190
4191
|
setTags(currentTags);
|
|
4191
4192
|
}, [templateId, currentTags.join("")]);
|
|
4192
4193
|
const addTag = () => {
|
|
@@ -4212,17 +4213,17 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4212
4213
|
setSaving(false);
|
|
4213
4214
|
}
|
|
4214
4215
|
});
|
|
4215
|
-
return /* @__PURE__ */
|
|
4216
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 1.5 }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4216
4217
|
material.TextField,
|
|
4217
4218
|
{
|
|
4218
4219
|
size: "small",
|
|
4219
|
-
label: "Name",
|
|
4220
|
+
label: t("rename.name-label", "Name"),
|
|
4220
4221
|
value: name,
|
|
4221
4222
|
onChange: (e) => setName(e.target.value),
|
|
4222
4223
|
disabled: !canEdit || saving,
|
|
4223
4224
|
fullWidth: true
|
|
4224
4225
|
}
|
|
4225
|
-
), /* @__PURE__ */
|
|
4226
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Box, null, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 0.5 } }, t("rename.tags", "Tags")), tags.length > 0 ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React62__default.default.createElement(
|
|
4226
4227
|
material.Chip,
|
|
4227
4228
|
{
|
|
4228
4229
|
key: tag,
|
|
@@ -4230,12 +4231,12 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4230
4231
|
size: "small",
|
|
4231
4232
|
onDelete: canEdit && !saving ? () => removeTag(tag) : void 0
|
|
4232
4233
|
}
|
|
4233
|
-
))) : /* @__PURE__ */
|
|
4234
|
+
))) : /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, t("rename.no-tags", "No tags yet.")), /* @__PURE__ */ React62__default.default.createElement(
|
|
4234
4235
|
material.TextField,
|
|
4235
4236
|
{
|
|
4236
4237
|
size: "small",
|
|
4237
4238
|
fullWidth: true,
|
|
4238
|
-
placeholder: "Add a tag",
|
|
4239
|
+
placeholder: t("rename.add-tag", "Add a tag"),
|
|
4239
4240
|
value: tagInput,
|
|
4240
4241
|
onChange: (e) => setTagInput(e.target.value),
|
|
4241
4242
|
disabled: !canEdit || saving,
|
|
@@ -4249,20 +4250,20 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4249
4250
|
}
|
|
4250
4251
|
},
|
|
4251
4252
|
InputProps: {
|
|
4252
|
-
endAdornment: /* @__PURE__ */
|
|
4253
|
+
endAdornment: /* @__PURE__ */ React62__default.default.createElement(material.InputAdornment, { position: "end" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4253
4254
|
material.Button,
|
|
4254
4255
|
{
|
|
4255
4256
|
size: "small",
|
|
4256
4257
|
onClick: addTag,
|
|
4257
4258
|
disabled: !canEdit || saving || !tagInput.trim(),
|
|
4258
|
-
startIcon: /* @__PURE__ */
|
|
4259
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }),
|
|
4259
4260
|
sx: { textTransform: "none" }
|
|
4260
4261
|
},
|
|
4261
|
-
"Add"
|
|
4262
|
+
t("common.add", "Add")
|
|
4262
4263
|
))
|
|
4263
4264
|
}
|
|
4264
4265
|
}
|
|
4265
|
-
)), /* @__PURE__ */
|
|
4266
|
+
)), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: canEdit ? "" : t("settings.no-rename-cb", "Wire a renameTemplate callback to enable editing from here"), placement: "top" }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
4266
4267
|
material.Button,
|
|
4267
4268
|
{
|
|
4268
4269
|
variant: "contained",
|
|
@@ -4270,9 +4271,9 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4270
4271
|
fullWidth: true,
|
|
4271
4272
|
onClick: handleSave,
|
|
4272
4273
|
disabled: !canEdit || saving || !dirty || !name.trim(),
|
|
4273
|
-
startIcon: justSaved ? /* @__PURE__ */
|
|
4274
|
+
startIcon: justSaved ? /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.CheckOutlined, { fontSize: "small" }) : null
|
|
4274
4275
|
},
|
|
4275
|
-
saving ? "Saving\u2026" : justSaved ? "Saved" : "Save details"
|
|
4276
|
+
saving ? t("common.saving", "Saving\u2026") : justSaved ? t("settings.saved", "Saved") : t("settings.save-details", "Save details")
|
|
4276
4277
|
))));
|
|
4277
4278
|
}
|
|
4278
4279
|
|
|
@@ -4447,7 +4448,7 @@ function VariablesPanel() {
|
|
|
4447
4448
|
const lastFocused = useLastFocusedEditable();
|
|
4448
4449
|
const root = document2.root;
|
|
4449
4450
|
if (!root || root.type !== "EmailLayout") {
|
|
4450
|
-
return /* @__PURE__ */
|
|
4451
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React62__default.default.createElement(material.Alert, { severity: "info" }, "Open a template to manage variables."));
|
|
4451
4452
|
}
|
|
4452
4453
|
const data = root.data;
|
|
4453
4454
|
const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
|
|
@@ -4458,9 +4459,9 @@ function VariablesPanel() {
|
|
|
4458
4459
|
sampleValue: (_b = v.sampleValue) != null ? _b : ""
|
|
4459
4460
|
};
|
|
4460
4461
|
});
|
|
4461
|
-
const usage =
|
|
4462
|
-
const declaredNames =
|
|
4463
|
-
const undeclared =
|
|
4462
|
+
const usage = React62.useMemo(() => collectTokenUsage(document2), [document2]);
|
|
4463
|
+
const declaredNames = React62.useMemo(() => new Set(variables.map((v) => v.name)), [variables]);
|
|
4464
|
+
const undeclared = React62.useMemo(
|
|
4464
4465
|
() => [...usage.keys()].filter((n) => n && !declaredNames.has(n)),
|
|
4465
4466
|
[usage, declaredNames]
|
|
4466
4467
|
);
|
|
@@ -4542,7 +4543,7 @@ function VariablesPanel() {
|
|
|
4542
4543
|
} catch (e) {
|
|
4543
4544
|
}
|
|
4544
4545
|
});
|
|
4545
|
-
return /* @__PURE__ */
|
|
4546
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Add variable" }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React62__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__ */ React62__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__ */ React62__default.default.createElement(material.Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React62__default.default.createElement(material.AlertTitle, { sx: { fontSize: 13 } }, "Undeclared in body"), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React62__default.default.createElement(
|
|
4546
4547
|
material.Chip,
|
|
4547
4548
|
{
|
|
4548
4549
|
key: name,
|
|
@@ -4550,12 +4551,12 @@ function VariablesPanel() {
|
|
|
4550
4551
|
label: name,
|
|
4551
4552
|
onClick: () => addFromToken(name),
|
|
4552
4553
|
onDelete: () => addFromToken(name),
|
|
4553
|
-
deleteIcon: /* @__PURE__ */
|
|
4554
|
+
deleteIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
4554
4555
|
sx: { fontFamily: "monospace" }
|
|
4555
4556
|
}
|
|
4556
|
-
))), /* @__PURE__ */
|
|
4557
|
+
))), /* @__PURE__ */ React62__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__ */ React62__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
|
|
4557
4558
|
var _a2;
|
|
4558
|
-
return /* @__PURE__ */
|
|
4559
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4559
4560
|
VariableRow,
|
|
4560
4561
|
{
|
|
4561
4562
|
key: i,
|
|
@@ -4588,9 +4589,9 @@ function VariableRow({
|
|
|
4588
4589
|
onCopy
|
|
4589
4590
|
}) {
|
|
4590
4591
|
var _a, _b;
|
|
4591
|
-
const [draftName, setDraftName] =
|
|
4592
|
-
const [isEditing, setIsEditing] =
|
|
4593
|
-
|
|
4592
|
+
const [draftName, setDraftName] = React62.useState(variable.name);
|
|
4593
|
+
const [isEditing, setIsEditing] = React62.useState(false);
|
|
4594
|
+
React62.useEffect(() => {
|
|
4594
4595
|
if (!isEditing) setDraftName(variable.name);
|
|
4595
4596
|
}, [variable.name, isEditing]);
|
|
4596
4597
|
const nameError = validateVariableName(draftName, siblings, index);
|
|
@@ -4606,7 +4607,7 @@ function VariableRow({
|
|
|
4606
4607
|
onCommitRename(draftName.trim());
|
|
4607
4608
|
}
|
|
4608
4609
|
};
|
|
4609
|
-
return /* @__PURE__ */
|
|
4610
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4610
4611
|
material.TextField,
|
|
4611
4612
|
{
|
|
4612
4613
|
label: "Name",
|
|
@@ -4631,7 +4632,7 @@ function VariableRow({
|
|
|
4631
4632
|
error: Boolean(nameError),
|
|
4632
4633
|
helperText: nameError != null ? nameError : " "
|
|
4633
4634
|
}
|
|
4634
|
-
), /* @__PURE__ */
|
|
4635
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Copy {{name}}" }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
4635
4636
|
material.IconButton,
|
|
4636
4637
|
{
|
|
4637
4638
|
size: "small",
|
|
@@ -4639,8 +4640,8 @@ function VariableRow({
|
|
|
4639
4640
|
disabled: !hasName,
|
|
4640
4641
|
"aria-label": `Copy ${variable.name || "variable"} token`
|
|
4641
4642
|
},
|
|
4642
|
-
/* @__PURE__ */
|
|
4643
|
-
))), /* @__PURE__ */
|
|
4643
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
|
|
4644
|
+
))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
4644
4645
|
material.IconButton,
|
|
4645
4646
|
{
|
|
4646
4647
|
size: "small",
|
|
@@ -4648,16 +4649,16 @@ function VariableRow({
|
|
|
4648
4649
|
disabled: !hasName || !canInsert,
|
|
4649
4650
|
"aria-label": `Insert ${variable.name || "variable"} at cursor`
|
|
4650
4651
|
},
|
|
4651
|
-
/* @__PURE__ */
|
|
4652
|
-
))), /* @__PURE__ */
|
|
4652
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.InputOutlined, { fontSize: "small" })
|
|
4653
|
+
))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Remove" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4653
4654
|
material.IconButton,
|
|
4654
4655
|
{
|
|
4655
4656
|
size: "small",
|
|
4656
4657
|
onClick: onRemove,
|
|
4657
4658
|
"aria-label": `Remove ${variable.name || "variable"}`
|
|
4658
4659
|
},
|
|
4659
|
-
/* @__PURE__ */
|
|
4660
|
-
)))), /* @__PURE__ */
|
|
4660
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
4661
|
+
)))), /* @__PURE__ */ React62__default.default.createElement(
|
|
4661
4662
|
material.TextField,
|
|
4662
4663
|
{
|
|
4663
4664
|
label: "Description",
|
|
@@ -4667,7 +4668,7 @@ function VariableRow({
|
|
|
4667
4668
|
onChange: (e) => onChangeDescription(e.target.value),
|
|
4668
4669
|
placeholder: "Optional"
|
|
4669
4670
|
}
|
|
4670
|
-
), /* @__PURE__ */
|
|
4671
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
4671
4672
|
material.TextField,
|
|
4672
4673
|
{
|
|
4673
4674
|
label: "Sample value",
|
|
@@ -4677,7 +4678,7 @@ function VariableRow({
|
|
|
4677
4678
|
onChange: (e) => onChangeSampleValue(e.target.value),
|
|
4678
4679
|
placeholder: "Shown in Preview mode",
|
|
4679
4680
|
InputProps: {
|
|
4680
|
-
startAdornment: /* @__PURE__ */
|
|
4681
|
+
startAdornment: /* @__PURE__ */ React62__default.default.createElement(
|
|
4681
4682
|
iconsMaterial.DataObjectOutlined,
|
|
4682
4683
|
{
|
|
4683
4684
|
fontSize: "small",
|
|
@@ -4686,7 +4687,7 @@ function VariableRow({
|
|
|
4686
4687
|
)
|
|
4687
4688
|
}
|
|
4688
4689
|
}
|
|
4689
|
-
), /* @__PURE__ */
|
|
4690
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React62__default.default.createElement(material.Chip, { size: "small", color: "warning", variant: "outlined", label: "Unused in body" }) : /* @__PURE__ */ React62__default.default.createElement(
|
|
4690
4691
|
material.Chip,
|
|
4691
4692
|
{
|
|
4692
4693
|
size: "small",
|
|
@@ -4711,13 +4712,13 @@ function InspectorDrawer({
|
|
|
4711
4712
|
const renderCurrentSidebarPanel = () => {
|
|
4712
4713
|
switch (selectedSidebarTab) {
|
|
4713
4714
|
case "block-configuration":
|
|
4714
|
-
return /* @__PURE__ */
|
|
4715
|
+
return /* @__PURE__ */ React62__default.default.createElement(ConfigurationPanel, null);
|
|
4715
4716
|
case "styles":
|
|
4716
|
-
return /* @__PURE__ */
|
|
4717
|
+
return /* @__PURE__ */ React62__default.default.createElement(StylesPanel, null);
|
|
4717
4718
|
case "variables":
|
|
4718
|
-
return /* @__PURE__ */
|
|
4719
|
+
return /* @__PURE__ */ React62__default.default.createElement(VariablesPanel, null);
|
|
4719
4720
|
case "template-settings":
|
|
4720
|
-
return /* @__PURE__ */
|
|
4721
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4721
4722
|
TemplatePanel,
|
|
4722
4723
|
{
|
|
4723
4724
|
deleteTemplate,
|
|
@@ -4727,7 +4728,7 @@ function InspectorDrawer({
|
|
|
4727
4728
|
);
|
|
4728
4729
|
}
|
|
4729
4730
|
};
|
|
4730
|
-
return /* @__PURE__ */
|
|
4731
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4731
4732
|
material.Drawer,
|
|
4732
4733
|
{
|
|
4733
4734
|
variant: "persistent",
|
|
@@ -4749,7 +4750,7 @@ function InspectorDrawer({
|
|
|
4749
4750
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
4750
4751
|
}
|
|
4751
4752
|
},
|
|
4752
|
-
/* @__PURE__ */
|
|
4753
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React62__default.default.createElement(material.Box, { px: 1 }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4753
4754
|
material.Tabs,
|
|
4754
4755
|
{
|
|
4755
4756
|
value: selectedSidebarTab,
|
|
@@ -4757,25 +4758,25 @@ function InspectorDrawer({
|
|
|
4757
4758
|
variant: "fullWidth",
|
|
4758
4759
|
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
4759
4760
|
},
|
|
4760
|
-
/* @__PURE__ */
|
|
4761
|
-
/* @__PURE__ */
|
|
4762
|
-
/* @__PURE__ */
|
|
4763
|
-
/* @__PURE__ */
|
|
4761
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "styles", label: t("inspector.tab.styles", "Styles") }),
|
|
4762
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "block-configuration", label: t("inspector.tab.inspect", "Inspect") }),
|
|
4763
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "variables", label: t("inspector.tab.variables", "Variables") }),
|
|
4764
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "template-settings", label: t("inspector.tab.settings", "Settings") })
|
|
4764
4765
|
))),
|
|
4765
|
-
/* @__PURE__ */
|
|
4766
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
4766
4767
|
);
|
|
4767
4768
|
}
|
|
4768
|
-
var SnackbarContext =
|
|
4769
|
+
var SnackbarContext = React62.createContext(null);
|
|
4769
4770
|
function useSnackbar() {
|
|
4770
|
-
const context =
|
|
4771
|
+
const context = React62.useContext(SnackbarContext);
|
|
4771
4772
|
if (!context) {
|
|
4772
4773
|
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
4773
4774
|
}
|
|
4774
4775
|
return context;
|
|
4775
4776
|
}
|
|
4776
4777
|
function SnackbarProvider({ children }) {
|
|
4777
|
-
const [message, setMessage] =
|
|
4778
|
-
const [duration, setDuration] =
|
|
4778
|
+
const [message, setMessage] = React62.useState(null);
|
|
4779
|
+
const [duration, setDuration] = React62.useState(3e3);
|
|
4779
4780
|
const showMessage = (text, customDuration = 3e3) => {
|
|
4780
4781
|
setMessage(text);
|
|
4781
4782
|
setDuration(customDuration);
|
|
@@ -4783,7 +4784,7 @@ function SnackbarProvider({ children }) {
|
|
|
4783
4784
|
const handleClose = () => {
|
|
4784
4785
|
setMessage(null);
|
|
4785
4786
|
};
|
|
4786
|
-
return /* @__PURE__ */
|
|
4787
|
+
return /* @__PURE__ */ React62__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React62__default.default.createElement(
|
|
4787
4788
|
material.Snackbar,
|
|
4788
4789
|
{
|
|
4789
4790
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4830,8 +4831,8 @@ function TemplateRow({
|
|
|
4830
4831
|
onDuplicateAsTemplate
|
|
4831
4832
|
}) {
|
|
4832
4833
|
const { setCurrentTemplate } = useEmailEditor();
|
|
4833
|
-
const [hover, setHover] =
|
|
4834
|
-
const [menuAnchor, setMenuAnchor] =
|
|
4834
|
+
const [hover, setHover] = React62.useState(false);
|
|
4835
|
+
const [menuAnchor, setMenuAnchor] = React62.useState(null);
|
|
4835
4836
|
const closeMenu = () => setMenuAnchor(null);
|
|
4836
4837
|
const openMenu = (e) => {
|
|
4837
4838
|
e.stopPropagation();
|
|
@@ -4860,7 +4861,7 @@ function TemplateRow({
|
|
|
4860
4861
|
const hasActions = Boolean(
|
|
4861
4862
|
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
4862
4863
|
);
|
|
4863
|
-
return /* @__PURE__ */
|
|
4864
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4864
4865
|
material.Box,
|
|
4865
4866
|
{
|
|
4866
4867
|
role: "button",
|
|
@@ -4886,7 +4887,7 @@ function TemplateRow({
|
|
|
4886
4887
|
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
4887
4888
|
}
|
|
4888
4889
|
},
|
|
4889
|
-
/* @__PURE__ */
|
|
4890
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { flexGrow: 1, minWidth: 0, pr: hasActions ? 3 : 0 } }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4890
4891
|
material.Typography,
|
|
4891
4892
|
{
|
|
4892
4893
|
variant: "body2",
|
|
@@ -4900,14 +4901,14 @@ function TemplateRow({
|
|
|
4900
4901
|
title: template.slug
|
|
4901
4902
|
},
|
|
4902
4903
|
template.slug
|
|
4903
|
-
), updated && !hasActions && /* @__PURE__ */
|
|
4904
|
+
), updated && !hasActions && /* @__PURE__ */ React62__default.default.createElement(
|
|
4904
4905
|
material.Typography,
|
|
4905
4906
|
{
|
|
4906
4907
|
variant: "caption",
|
|
4907
4908
|
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
4908
4909
|
},
|
|
4909
4910
|
updated
|
|
4910
|
-
)), template.description && /* @__PURE__ */
|
|
4911
|
+
)), template.description && /* @__PURE__ */ React62__default.default.createElement(
|
|
4911
4912
|
material.Typography,
|
|
4912
4913
|
{
|
|
4913
4914
|
variant: "caption",
|
|
@@ -4921,7 +4922,7 @@ function TemplateRow({
|
|
|
4921
4922
|
}
|
|
4922
4923
|
},
|
|
4923
4924
|
template.description
|
|
4924
|
-
), template.tags && template.tags.length > 0 && /* @__PURE__ */
|
|
4925
|
+
), template.tags && template.tags.length > 0 && /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React62__default.default.createElement(
|
|
4925
4926
|
material.Chip,
|
|
4926
4927
|
{
|
|
4927
4928
|
key: tag,
|
|
@@ -4930,7 +4931,7 @@ function TemplateRow({
|
|
|
4930
4931
|
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
4931
4932
|
}
|
|
4932
4933
|
))))),
|
|
4933
|
-
hasActions && /* @__PURE__ */
|
|
4934
|
+
hasActions && /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("row.more", "More") }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4934
4935
|
material.IconButton,
|
|
4935
4936
|
{
|
|
4936
4937
|
size: "small",
|
|
@@ -4946,8 +4947,8 @@ function TemplateRow({
|
|
|
4946
4947
|
transition: "opacity 120ms"
|
|
4947
4948
|
}
|
|
4948
4949
|
},
|
|
4949
|
-
/* @__PURE__ */
|
|
4950
|
-
)), /* @__PURE__ */
|
|
4950
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.MoreVertOutlined, { fontSize: "small" })
|
|
4951
|
+
)), /* @__PURE__ */ React62__default.default.createElement(
|
|
4951
4952
|
material.Menu,
|
|
4952
4953
|
{
|
|
4953
4954
|
anchorEl: menuAnchor,
|
|
@@ -4958,14 +4959,14 @@ function TemplateRow({
|
|
|
4958
4959
|
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
4959
4960
|
slotProps: { paper: { sx: { minWidth: 200 } } }
|
|
4960
4961
|
},
|
|
4961
|
-
onRename && /* @__PURE__ */
|
|
4962
|
-
onDuplicate && /* @__PURE__ */
|
|
4963
|
-
onDuplicateAsTemplate && /* @__PURE__ */
|
|
4964
|
-
onPromote && /* @__PURE__ */
|
|
4965
|
-
onDemote && /* @__PURE__ */
|
|
4962
|
+
onRename && /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { onClick: runAction(onRename) }, /* @__PURE__ */ React62__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DriveFileRenameOutlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, null, t("row.edit-details", "Edit name & tags\u2026"))),
|
|
4963
|
+
onDuplicate && /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { onClick: runAction(onDuplicate) }, /* @__PURE__ */ React62__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, null, t("row.duplicate", "Duplicate"))),
|
|
4964
|
+
onDuplicateAsTemplate && /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { onClick: runAction(onDuplicateAsTemplate) }, /* @__PURE__ */ React62__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, null, t("row.duplicate-as-template", "Duplicate as template"))),
|
|
4965
|
+
onPromote && /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { onClick: runAction(onPromote) }, /* @__PURE__ */ React62__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FileUploadOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, null, t("row.promote", "Promote to sample"))),
|
|
4966
|
+
onDemote && /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { onClick: runAction(onDemote) }, /* @__PURE__ */ React62__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FileDownloadOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, null, t("row.demote", "Demote to template"))),
|
|
4966
4967
|
onDelete && [
|
|
4967
|
-
/* @__PURE__ */
|
|
4968
|
-
/* @__PURE__ */
|
|
4968
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Divider, { key: "divider" }),
|
|
4969
|
+
/* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { key: "delete", onClick: runAction(onDelete), sx: { color: "error.main" } }, /* @__PURE__ */ React62__default.default.createElement(material.ListItemIcon, { sx: { color: "error.main" } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, null, t("tune.delete", "Delete")))
|
|
4969
4970
|
]
|
|
4970
4971
|
))
|
|
4971
4972
|
);
|
|
@@ -5080,31 +5081,31 @@ var PREVIEW_MAX = 36;
|
|
|
5080
5081
|
function iconForType(type) {
|
|
5081
5082
|
switch (type) {
|
|
5082
5083
|
case "EmailLayout":
|
|
5083
|
-
return /* @__PURE__ */
|
|
5084
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DashboardOutlined, { fontSize: "small" });
|
|
5084
5085
|
case "Heading":
|
|
5085
|
-
return /* @__PURE__ */
|
|
5086
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HMobiledataOutlined, { fontSize: "small" });
|
|
5086
5087
|
case "Text":
|
|
5087
|
-
return /* @__PURE__ */
|
|
5088
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.NotesOutlined, { fontSize: "small" });
|
|
5088
5089
|
case "Button":
|
|
5089
|
-
return /* @__PURE__ */
|
|
5090
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SmartButtonOutlined, { fontSize: "small" });
|
|
5090
5091
|
case "Image":
|
|
5091
|
-
return /* @__PURE__ */
|
|
5092
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ImageOutlined, { fontSize: "small" });
|
|
5092
5093
|
case "Avatar":
|
|
5093
|
-
return /* @__PURE__ */
|
|
5094
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AccountCircleOutlined, { fontSize: "small" });
|
|
5094
5095
|
case "Signature":
|
|
5095
|
-
return /* @__PURE__ */
|
|
5096
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContactMailOutlined, { fontSize: "small" });
|
|
5096
5097
|
case "Divider":
|
|
5097
|
-
return /* @__PURE__ */
|
|
5098
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, { fontSize: "small" });
|
|
5098
5099
|
case "Spacer":
|
|
5099
|
-
return /* @__PURE__ */
|
|
5100
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.Crop32Outlined, { fontSize: "small" });
|
|
5100
5101
|
case "Html":
|
|
5101
|
-
return /* @__PURE__ */
|
|
5102
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HtmlOutlined, { fontSize: "small" });
|
|
5102
5103
|
case "Container":
|
|
5103
|
-
return /* @__PURE__ */
|
|
5104
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" });
|
|
5104
5105
|
case "ColumnsContainer":
|
|
5105
|
-
return /* @__PURE__ */
|
|
5106
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ViewColumnOutlined, { fontSize: "small" });
|
|
5106
5107
|
default:
|
|
5107
|
-
return /* @__PURE__ */
|
|
5108
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.BusinessOutlined, { fontSize: "small" });
|
|
5108
5109
|
}
|
|
5109
5110
|
}
|
|
5110
5111
|
function previewText(text) {
|
|
@@ -5134,7 +5135,7 @@ function buildNode(id, doc, ctx) {
|
|
|
5134
5135
|
).filter((n) => n !== null);
|
|
5135
5136
|
return {
|
|
5136
5137
|
id,
|
|
5137
|
-
label: "Canvas",
|
|
5138
|
+
label: t("outline.canvas", "Canvas"),
|
|
5138
5139
|
icon: iconForType("EmailLayout"),
|
|
5139
5140
|
children,
|
|
5140
5141
|
containerChildrenRef: parentForChildren
|
|
@@ -5182,7 +5183,7 @@ function buildNode(id, doc, ctx) {
|
|
|
5182
5183
|
id: `${id}::col${colIdx}`,
|
|
5183
5184
|
label: `Column ${colIdx + 1}`,
|
|
5184
5185
|
preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
|
|
5185
|
-
icon: /* @__PURE__ */
|
|
5186
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
|
|
5186
5187
|
children: colChildren,
|
|
5187
5188
|
containerChildrenRef: parentForCol
|
|
5188
5189
|
});
|
|
@@ -5229,7 +5230,7 @@ var DRAG_MIME = "application/x-email-editor-block";
|
|
|
5229
5230
|
function OutlinePanel() {
|
|
5230
5231
|
const document2 = useDocument();
|
|
5231
5232
|
const selectedBlockId = useSelectedBlockId();
|
|
5232
|
-
const [dragging, setDragging] =
|
|
5233
|
+
const [dragging, setDragging] = React62.useState(null);
|
|
5233
5234
|
const tree = buildNode(ROOT_BLOCK_ID2, document2);
|
|
5234
5235
|
const performMove = (payload, targetParent, targetIndex) => {
|
|
5235
5236
|
const patch = buildMovePatch(
|
|
@@ -5244,7 +5245,7 @@ function OutlinePanel() {
|
|
|
5244
5245
|
setSelectedBlockId(payload.sourceId);
|
|
5245
5246
|
}
|
|
5246
5247
|
};
|
|
5247
|
-
return /* @__PURE__ */
|
|
5248
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, null, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5, px: 0.5 } }, t("outline.title", "Outline")), /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { display: "block", color: "text.secondary", px: 0.5, mb: 1 } }, t("outline.hint", "Click a row to select. Drag a row to reorder or move it into a container.")), tree ? /* @__PURE__ */ React62__default.default.createElement(
|
|
5248
5249
|
OutlineRow,
|
|
5249
5250
|
{
|
|
5250
5251
|
node: tree,
|
|
@@ -5255,7 +5256,7 @@ function OutlinePanel() {
|
|
|
5255
5256
|
setDragging,
|
|
5256
5257
|
performMove
|
|
5257
5258
|
}
|
|
5258
|
-
) : /* @__PURE__ */
|
|
5259
|
+
) : /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
|
|
5259
5260
|
}
|
|
5260
5261
|
function OutlineRow({
|
|
5261
5262
|
node,
|
|
@@ -5266,8 +5267,8 @@ function OutlineRow({
|
|
|
5266
5267
|
setDragging,
|
|
5267
5268
|
performMove
|
|
5268
5269
|
}) {
|
|
5269
|
-
const [expanded, setExpanded] =
|
|
5270
|
-
const [dropPos, setDropPos] =
|
|
5270
|
+
const [expanded, setExpanded] = React62.useState(true);
|
|
5271
|
+
const [dropPos, setDropPos] = React62.useState(null);
|
|
5271
5272
|
const hasChildren = Boolean(node.children && node.children.length > 0);
|
|
5272
5273
|
const isSelectable = !node.id.includes("::");
|
|
5273
5274
|
const isSelected = isSelectable && selectedBlockId === node.id;
|
|
@@ -5341,7 +5342,7 @@ function OutlineRow({
|
|
|
5341
5342
|
const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
|
|
5342
5343
|
if (patch) setDocument(patch);
|
|
5343
5344
|
};
|
|
5344
|
-
return /* @__PURE__ */
|
|
5345
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { position: "relative" } }, dropPos === "before" && /* @__PURE__ */ React62__default.default.createElement(DropLine, { depth }), /* @__PURE__ */ React62__default.default.createElement(
|
|
5345
5346
|
material.Stack,
|
|
5346
5347
|
{
|
|
5347
5348
|
direction: "row",
|
|
@@ -5374,7 +5375,7 @@ function OutlineRow({
|
|
|
5374
5375
|
userSelect: "none"
|
|
5375
5376
|
}
|
|
5376
5377
|
},
|
|
5377
|
-
hasChildren ? /* @__PURE__ */
|
|
5378
|
+
hasChildren ? /* @__PURE__ */ React62__default.default.createElement(
|
|
5378
5379
|
material.Box,
|
|
5379
5380
|
{
|
|
5380
5381
|
role: "button",
|
|
@@ -5385,9 +5386,9 @@ function OutlineRow({
|
|
|
5385
5386
|
},
|
|
5386
5387
|
sx: { display: "flex", alignItems: "center", cursor: "pointer" }
|
|
5387
5388
|
},
|
|
5388
|
-
expanded ? /* @__PURE__ */
|
|
5389
|
-
) : /* @__PURE__ */
|
|
5390
|
-
/* @__PURE__ */
|
|
5389
|
+
expanded ? /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ChevronRight, { fontSize: "small" })
|
|
5390
|
+
) : /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { width: 20 } }),
|
|
5391
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5391
5392
|
material.Box,
|
|
5392
5393
|
{
|
|
5393
5394
|
sx: {
|
|
@@ -5399,7 +5400,7 @@ function OutlineRow({
|
|
|
5399
5400
|
},
|
|
5400
5401
|
node.icon
|
|
5401
5402
|
),
|
|
5402
|
-
/* @__PURE__ */
|
|
5403
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5403
5404
|
material.Typography,
|
|
5404
5405
|
{
|
|
5405
5406
|
variant: "body2",
|
|
@@ -5411,7 +5412,7 @@ function OutlineRow({
|
|
|
5411
5412
|
},
|
|
5412
5413
|
node.label
|
|
5413
5414
|
),
|
|
5414
|
-
node.preview && /* @__PURE__ */
|
|
5415
|
+
node.preview && /* @__PURE__ */ React62__default.default.createElement(
|
|
5415
5416
|
material.Typography,
|
|
5416
5417
|
{
|
|
5417
5418
|
variant: "body2",
|
|
@@ -5427,7 +5428,7 @@ function OutlineRow({
|
|
|
5427
5428
|
"\u2014 ",
|
|
5428
5429
|
node.preview
|
|
5429
5430
|
),
|
|
5430
|
-
canMove && /* @__PURE__ */
|
|
5431
|
+
canMove && /* @__PURE__ */ React62__default.default.createElement(
|
|
5431
5432
|
material.Box,
|
|
5432
5433
|
{
|
|
5433
5434
|
className: "outline-move-btns",
|
|
@@ -5438,7 +5439,7 @@ function OutlineRow({
|
|
|
5438
5439
|
transition: "opacity 120ms"
|
|
5439
5440
|
}
|
|
5440
5441
|
},
|
|
5441
|
-
/* @__PURE__ */
|
|
5442
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Move up" }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
5442
5443
|
material.IconButton,
|
|
5443
5444
|
{
|
|
5444
5445
|
size: "small",
|
|
@@ -5450,9 +5451,9 @@ function OutlineRow({
|
|
|
5450
5451
|
"aria-label": `Move ${node.label} up`,
|
|
5451
5452
|
sx: { p: 0.25 }
|
|
5452
5453
|
},
|
|
5453
|
-
/* @__PURE__ */
|
|
5454
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.KeyboardArrowUp, { fontSize: "small" })
|
|
5454
5455
|
))),
|
|
5455
|
-
/* @__PURE__ */
|
|
5456
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Move down" }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
5456
5457
|
material.IconButton,
|
|
5457
5458
|
{
|
|
5458
5459
|
size: "small",
|
|
@@ -5464,10 +5465,10 @@ function OutlineRow({
|
|
|
5464
5465
|
"aria-label": `Move ${node.label} down`,
|
|
5465
5466
|
sx: { p: 0.25 }
|
|
5466
5467
|
},
|
|
5467
|
-
/* @__PURE__ */
|
|
5468
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.KeyboardArrowDown, { fontSize: "small" })
|
|
5468
5469
|
)))
|
|
5469
5470
|
)
|
|
5470
|
-
), dropPos === "after" && /* @__PURE__ */
|
|
5471
|
+
), dropPos === "after" && /* @__PURE__ */ React62__default.default.createElement(DropLine, { depth })), hasChildren && expanded && /* @__PURE__ */ React62__default.default.createElement(material.Box, null, node.children.map((child) => /* @__PURE__ */ React62__default.default.createElement(
|
|
5471
5472
|
OutlineRow,
|
|
5472
5473
|
{
|
|
5473
5474
|
key: child.id,
|
|
@@ -5482,7 +5483,7 @@ function OutlineRow({
|
|
|
5482
5483
|
))));
|
|
5483
5484
|
}
|
|
5484
5485
|
function DropLine({ depth }) {
|
|
5485
|
-
return /* @__PURE__ */
|
|
5486
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
5486
5487
|
material.Box,
|
|
5487
5488
|
{
|
|
5488
5489
|
sx: {
|
|
@@ -5490,7 +5491,7 @@ function DropLine({ depth }) {
|
|
|
5490
5491
|
height: 0
|
|
5491
5492
|
}
|
|
5492
5493
|
},
|
|
5493
|
-
/* @__PURE__ */
|
|
5494
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5494
5495
|
material.Box,
|
|
5495
5496
|
{
|
|
5496
5497
|
sx: {
|
|
@@ -5516,11 +5517,11 @@ function NewTemplatePickerDialog({
|
|
|
5516
5517
|
onClose,
|
|
5517
5518
|
onCreate
|
|
5518
5519
|
}) {
|
|
5519
|
-
const [name, setName] =
|
|
5520
|
-
const [selectedStarter, setSelectedStarter] =
|
|
5521
|
-
const [error, setError] =
|
|
5522
|
-
const [busy, setBusy] =
|
|
5523
|
-
|
|
5520
|
+
const [name, setName] = React62.useState("");
|
|
5521
|
+
const [selectedStarter, setSelectedStarter] = React62.useState(null);
|
|
5522
|
+
const [error, setError] = React62.useState(null);
|
|
5523
|
+
const [busy, setBusy] = React62.useState(false);
|
|
5524
|
+
React62.useEffect(() => {
|
|
5524
5525
|
if (open) {
|
|
5525
5526
|
setName(defaultName != null ? defaultName : t(kind === "sample" ? "drawer.new-sample" : "drawer.new-template", kind === "sample" ? "New sample" : "New template"));
|
|
5526
5527
|
setSelectedStarter(null);
|
|
@@ -5551,7 +5552,7 @@ function NewTemplatePickerDialog({
|
|
|
5551
5552
|
}
|
|
5552
5553
|
});
|
|
5553
5554
|
const pickable = samples.filter((s) => s.id !== "empty-email");
|
|
5554
|
-
return /* @__PURE__ */
|
|
5555
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Dialog, { open, onClose: busy ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React62__default.default.createElement(material.DialogTitle, null, kind === "sample" ? t("picker.title-sample", "New sample") : t("picker.title-template", "New template")), /* @__PURE__ */ React62__default.default.createElement(material.DialogContent, { dividers: true }, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "subtitle2", sx: { mb: 1 } }, t("picker.start-from", "Start from")), /* @__PURE__ */ React62__default.default.createElement(
|
|
5555
5556
|
material.List,
|
|
5556
5557
|
{
|
|
5557
5558
|
dense: true,
|
|
@@ -5565,24 +5566,24 @@ function NewTemplatePickerDialog({
|
|
|
5565
5566
|
overflowY: "auto"
|
|
5566
5567
|
}
|
|
5567
5568
|
},
|
|
5568
|
-
/* @__PURE__ */
|
|
5569
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5569
5570
|
material.ListItemButton,
|
|
5570
5571
|
{
|
|
5571
5572
|
selected: selectedStarter === null,
|
|
5572
5573
|
onClick: () => setSelectedStarter(null)
|
|
5573
5574
|
},
|
|
5574
|
-
/* @__PURE__ */
|
|
5575
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.InsertDriveFileOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, { primary: t("picker.blank-title", "Blank"), secondary: t("picker.blank-desc", "Start from an empty email") }))
|
|
5575
5576
|
),
|
|
5576
|
-
pickable.map((s) => /* @__PURE__ */
|
|
5577
|
+
pickable.map((s) => /* @__PURE__ */ React62__default.default.createElement(
|
|
5577
5578
|
material.ListItemButton,
|
|
5578
5579
|
{
|
|
5579
5580
|
key: s.id,
|
|
5580
5581
|
selected: selectedStarter === s.id,
|
|
5581
5582
|
onClick: () => setSelectedStarter(s.id)
|
|
5582
5583
|
},
|
|
5583
|
-
/* @__PURE__ */
|
|
5584
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DescriptionOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React62__default.default.createElement(material.ListItemText, { primary: s.slug, secondary: s.description }))
|
|
5584
5585
|
))
|
|
5585
|
-
), /* @__PURE__ */
|
|
5586
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
5586
5587
|
material.TextField,
|
|
5587
5588
|
{
|
|
5588
5589
|
autoFocus: true,
|
|
@@ -5602,7 +5603,7 @@ function NewTemplatePickerDialog({
|
|
|
5602
5603
|
helperText: error != null ? error : " ",
|
|
5603
5604
|
disabled: busy
|
|
5604
5605
|
}
|
|
5605
|
-
)), /* @__PURE__ */
|
|
5606
|
+
)), /* @__PURE__ */ React62__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React62__default.default.createElement(material.Button, { onClick: onClose, disabled: busy }, t("common.cancel", "Cancel")), /* @__PURE__ */ React62__default.default.createElement(material.Button, { variant: "contained", onClick: handleCreate, disabled: busy }, busy ? t("picker.creating", "Creating\u2026") : kind === "sample" ? t("picker.create-sample", "Create sample") : t("picker.create-template", "Create template"))));
|
|
5606
5607
|
}
|
|
5607
5608
|
function RenameDialog({
|
|
5608
5609
|
open,
|
|
@@ -5612,12 +5613,12 @@ function RenameDialog({
|
|
|
5612
5613
|
onClose,
|
|
5613
5614
|
onSubmit
|
|
5614
5615
|
}) {
|
|
5615
|
-
const [slug, setSlug] =
|
|
5616
|
-
const [tags, setTags] =
|
|
5617
|
-
const [tagInput, setTagInput] =
|
|
5618
|
-
const [error, setError] =
|
|
5619
|
-
const [submitting, setSubmitting] =
|
|
5620
|
-
|
|
5616
|
+
const [slug, setSlug] = React62.useState(currentSlug);
|
|
5617
|
+
const [tags, setTags] = React62.useState(currentTags);
|
|
5618
|
+
const [tagInput, setTagInput] = React62.useState("");
|
|
5619
|
+
const [error, setError] = React62.useState(null);
|
|
5620
|
+
const [submitting, setSubmitting] = React62.useState(false);
|
|
5621
|
+
React62.useEffect(() => {
|
|
5621
5622
|
if (open) {
|
|
5622
5623
|
setSlug(currentSlug);
|
|
5623
5624
|
setTags(currentTags);
|
|
@@ -5664,7 +5665,7 @@ function RenameDialog({
|
|
|
5664
5665
|
setSubmitting(false);
|
|
5665
5666
|
}
|
|
5666
5667
|
});
|
|
5667
|
-
return /* @__PURE__ */
|
|
5668
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Dialog, { open, onClose: submitting ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React62__default.default.createElement(material.DialogTitle, null, t("rename.title", "Edit details")), /* @__PURE__ */ React62__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
5668
5669
|
material.TextField,
|
|
5669
5670
|
{
|
|
5670
5671
|
autoFocus: true,
|
|
@@ -5684,7 +5685,7 @@ function RenameDialog({
|
|
|
5684
5685
|
if (e.key === "Enter" && !submitting) handleSubmit();
|
|
5685
5686
|
}
|
|
5686
5687
|
}
|
|
5687
|
-
), /* @__PURE__ */
|
|
5688
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 1, mb: 0.5 } }, t("rename.tags", "Tags")), tags.length > 0 ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React62__default.default.createElement(
|
|
5688
5689
|
material.Chip,
|
|
5689
5690
|
{
|
|
5690
5691
|
key: tag,
|
|
@@ -5692,7 +5693,7 @@ function RenameDialog({
|
|
|
5692
5693
|
size: "small",
|
|
5693
5694
|
onDelete: submitting ? void 0 : () => removeTag(tag)
|
|
5694
5695
|
}
|
|
5695
|
-
))) : /* @__PURE__ */
|
|
5696
|
+
))) : /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, t("rename.no-tags", "No tags yet.")), /* @__PURE__ */ React62__default.default.createElement(
|
|
5696
5697
|
material.TextField,
|
|
5697
5698
|
{
|
|
5698
5699
|
size: "small",
|
|
@@ -5711,20 +5712,20 @@ function RenameDialog({
|
|
|
5711
5712
|
}
|
|
5712
5713
|
},
|
|
5713
5714
|
InputProps: {
|
|
5714
|
-
endAdornment: /* @__PURE__ */
|
|
5715
|
+
endAdornment: /* @__PURE__ */ React62__default.default.createElement(material.InputAdornment, { position: "end" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
5715
5716
|
material.Button,
|
|
5716
5717
|
{
|
|
5717
5718
|
size: "small",
|
|
5718
5719
|
onClick: addTag,
|
|
5719
5720
|
disabled: !tagInput.trim() || submitting,
|
|
5720
|
-
startIcon: /* @__PURE__ */
|
|
5721
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }),
|
|
5721
5722
|
sx: { textTransform: "none" }
|
|
5722
5723
|
},
|
|
5723
5724
|
t("common.add", "Add")
|
|
5724
5725
|
))
|
|
5725
5726
|
}
|
|
5726
5727
|
}
|
|
5727
|
-
), /* @__PURE__ */
|
|
5728
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { minHeight: 8 } })), /* @__PURE__ */ React62__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React62__default.default.createElement(material.Button, { onClick: onClose, disabled: submitting }, t("common.cancel", "Cancel")), /* @__PURE__ */ React62__default.default.createElement(
|
|
5728
5729
|
material.Button,
|
|
5729
5730
|
{
|
|
5730
5731
|
onClick: handleSubmit,
|
|
@@ -5743,10 +5744,10 @@ function SaveTemplateDialog({
|
|
|
5743
5744
|
error: externalError = null,
|
|
5744
5745
|
mode = "save-as"
|
|
5745
5746
|
}) {
|
|
5746
|
-
const [templateName, setTemplateName] =
|
|
5747
|
-
const [internalError, setInternalError] =
|
|
5748
|
-
const [isSubmitting, setIsSubmitting] =
|
|
5749
|
-
|
|
5747
|
+
const [templateName, setTemplateName] = React62.useState(defaultName);
|
|
5748
|
+
const [internalError, setInternalError] = React62.useState("");
|
|
5749
|
+
const [isSubmitting, setIsSubmitting] = React62.useState(false);
|
|
5750
|
+
React62.useEffect(() => {
|
|
5750
5751
|
if (open) {
|
|
5751
5752
|
setTemplateName(defaultName);
|
|
5752
5753
|
setInternalError("");
|
|
@@ -5794,7 +5795,7 @@ function SaveTemplateDialog({
|
|
|
5794
5795
|
setInternalError("");
|
|
5795
5796
|
onClose();
|
|
5796
5797
|
};
|
|
5797
|
-
return /* @__PURE__ */
|
|
5798
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
5798
5799
|
material.Dialog,
|
|
5799
5800
|
{
|
|
5800
5801
|
open,
|
|
@@ -5802,8 +5803,8 @@ function SaveTemplateDialog({
|
|
|
5802
5803
|
maxWidth: "sm",
|
|
5803
5804
|
fullWidth: true
|
|
5804
5805
|
},
|
|
5805
|
-
/* @__PURE__ */
|
|
5806
|
-
/* @__PURE__ */
|
|
5806
|
+
/* @__PURE__ */ React62__default.default.createElement(material.DialogTitle, null, mode === "new" ? t("save-dialog.title-new", "Create a new template") : t("save-dialog.title", "Save as a new template")),
|
|
5807
|
+
/* @__PURE__ */ React62__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
5807
5808
|
material.TextField,
|
|
5808
5809
|
{
|
|
5809
5810
|
autoFocus: true,
|
|
@@ -5826,7 +5827,7 @@ function SaveTemplateDialog({
|
|
|
5826
5827
|
disabled: isSubmitting
|
|
5827
5828
|
}
|
|
5828
5829
|
))),
|
|
5829
|
-
/* @__PURE__ */
|
|
5830
|
+
/* @__PURE__ */ React62__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React62__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, t("common.cancel", "Cancel")), /* @__PURE__ */ React62__default.default.createElement(
|
|
5830
5831
|
material.Button,
|
|
5831
5832
|
{
|
|
5832
5833
|
onClick: handleSave,
|
|
@@ -5896,19 +5897,19 @@ function SamplesDrawer({
|
|
|
5896
5897
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
5897
5898
|
const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
|
|
5898
5899
|
const { showMessage } = useSnackbar();
|
|
5899
|
-
const [samples, setSamples] =
|
|
5900
|
-
const [templates, setTemplates] =
|
|
5901
|
-
const [loadingSamples, setLoadingSamples] =
|
|
5902
|
-
const [loadingTemplates, setLoadingTemplates] =
|
|
5903
|
-
const [templatesError, setTemplatesError] =
|
|
5904
|
-
const [activeLeftTab, setActiveLeftTab] =
|
|
5905
|
-
const [search, setSearch] =
|
|
5906
|
-
const [sortKey, setSortKey] =
|
|
5907
|
-
const [activeTags, setActiveTags] =
|
|
5908
|
-
const [renameTarget, setRenameTarget] =
|
|
5909
|
-
const [pendingSaveAs, setPendingSaveAs] =
|
|
5910
|
-
const [newError, setNewError] =
|
|
5911
|
-
const [pickerKind, setPickerKind] =
|
|
5900
|
+
const [samples, setSamples] = React62.useState([buildEmptyTemplate()]);
|
|
5901
|
+
const [templates, setTemplates] = React62.useState([]);
|
|
5902
|
+
const [loadingSamples, setLoadingSamples] = React62.useState(false);
|
|
5903
|
+
const [loadingTemplates, setLoadingTemplates] = React62.useState(false);
|
|
5904
|
+
const [templatesError, setTemplatesError] = React62.useState(null);
|
|
5905
|
+
const [activeLeftTab, setActiveLeftTab] = React62.useState("templates");
|
|
5906
|
+
const [search, setSearch] = React62.useState("");
|
|
5907
|
+
const [sortKey, setSortKey] = React62.useState("updatedAt");
|
|
5908
|
+
const [activeTags, setActiveTags] = React62.useState([]);
|
|
5909
|
+
const [renameTarget, setRenameTarget] = React62.useState(null);
|
|
5910
|
+
const [pendingSaveAs, setPendingSaveAs] = React62.useState(null);
|
|
5911
|
+
const [newError, setNewError] = React62.useState(null);
|
|
5912
|
+
const [pickerKind, setPickerKind] = React62.useState(null);
|
|
5912
5913
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
5913
5914
|
if (templateId === "empty-email") {
|
|
5914
5915
|
return empty_email_message_default;
|
|
@@ -5919,7 +5920,7 @@ function SamplesDrawer({
|
|
|
5919
5920
|
return null;
|
|
5920
5921
|
});
|
|
5921
5922
|
const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
|
|
5922
|
-
|
|
5923
|
+
React62.useEffect(() => {
|
|
5923
5924
|
if (!enabled || !samplesDrawerOpen || !loadSamples) return;
|
|
5924
5925
|
setLoadingSamples(true);
|
|
5925
5926
|
loadSamples().then((results) => {
|
|
@@ -5954,11 +5955,11 @@ function SamplesDrawer({
|
|
|
5954
5955
|
setTemplates((prev) => prev.some((t2) => t2.id === id) ? prev : [...prev, row]);
|
|
5955
5956
|
}
|
|
5956
5957
|
};
|
|
5957
|
-
|
|
5958
|
+
React62.useEffect(() => {
|
|
5958
5959
|
if (!enabled || !loadTemplates) return;
|
|
5959
5960
|
refreshTemplates();
|
|
5960
5961
|
}, [enabled, loadTemplates]);
|
|
5961
|
-
|
|
5962
|
+
React62.useEffect(() => {
|
|
5962
5963
|
const handler = (e) => {
|
|
5963
5964
|
const detail = e.detail;
|
|
5964
5965
|
if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
|
|
@@ -5966,7 +5967,7 @@ function SamplesDrawer({
|
|
|
5966
5967
|
window.addEventListener("templateListUpdated", handler);
|
|
5967
5968
|
return () => window.removeEventListener("templateListUpdated", handler);
|
|
5968
5969
|
}, []);
|
|
5969
|
-
const { templateRows, sampleRows } =
|
|
5970
|
+
const { templateRows, sampleRows } = React62.useMemo(() => {
|
|
5970
5971
|
const byId = /* @__PURE__ */ new Map();
|
|
5971
5972
|
for (const s of samples) byId.set(s.id, s);
|
|
5972
5973
|
for (const t2 of templates) byId.set(t2.id, t2);
|
|
@@ -5976,14 +5977,14 @@ function SamplesDrawer({
|
|
|
5976
5977
|
sampleRows: all.filter((t2) => t2.kind === "sample")
|
|
5977
5978
|
};
|
|
5978
5979
|
}, [samples, templates]);
|
|
5979
|
-
const allTags =
|
|
5980
|
+
const allTags = React62.useMemo(() => {
|
|
5980
5981
|
var _a2, _b2;
|
|
5981
5982
|
const set = /* @__PURE__ */ new Set();
|
|
5982
5983
|
for (const t2 of templateRows) (_a2 = t2.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
5983
5984
|
for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
|
|
5984
5985
|
return Array.from(set).sort();
|
|
5985
5986
|
}, [templateRows, sampleRows]);
|
|
5986
|
-
const matchesSearchAndTags =
|
|
5987
|
+
const matchesSearchAndTags = React62.useMemo(() => {
|
|
5987
5988
|
const term = search.trim().toLowerCase();
|
|
5988
5989
|
return (t2) => {
|
|
5989
5990
|
if (term) {
|
|
@@ -5997,11 +5998,11 @@ function SamplesDrawer({
|
|
|
5997
5998
|
return true;
|
|
5998
5999
|
};
|
|
5999
6000
|
}, [search, activeTags]);
|
|
6000
|
-
const filteredTemplates =
|
|
6001
|
+
const filteredTemplates = React62.useMemo(
|
|
6001
6002
|
() => templateRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
6002
6003
|
[templateRows, matchesSearchAndTags, sortKey]
|
|
6003
6004
|
);
|
|
6004
|
-
const filteredSamples =
|
|
6005
|
+
const filteredSamples = React62.useMemo(
|
|
6005
6006
|
() => sampleRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
6006
6007
|
[sampleRows, matchesSearchAndTags, sortKey]
|
|
6007
6008
|
);
|
|
@@ -6147,7 +6148,7 @@ function SamplesDrawer({
|
|
|
6147
6148
|
return null;
|
|
6148
6149
|
}
|
|
6149
6150
|
const existingSlugs = templates.map((t2) => t2.slug);
|
|
6150
|
-
return /* @__PURE__ */
|
|
6151
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
6151
6152
|
material.Drawer,
|
|
6152
6153
|
{
|
|
6153
6154
|
variant: "persistent",
|
|
@@ -6162,7 +6163,7 @@ function SamplesDrawer({
|
|
|
6162
6163
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
6163
6164
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
6164
6165
|
},
|
|
6165
|
-
/* @__PURE__ */
|
|
6166
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6166
6167
|
material.Stack,
|
|
6167
6168
|
{
|
|
6168
6169
|
py: 1,
|
|
@@ -6172,16 +6173,16 @@ function SamplesDrawer({
|
|
|
6172
6173
|
spacing: 1.5,
|
|
6173
6174
|
sx: { overflowY: "auto" }
|
|
6174
6175
|
},
|
|
6175
|
-
/* @__PURE__ */
|
|
6176
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "h6", component: "h1" }, /* @__PURE__ */ React62__default.default.createElement(react.Trans, { id: "drawer.library" }, "Library")), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template") }, /* @__PURE__ */ React62__default.default.createElement(
|
|
6176
6177
|
material.IconButton,
|
|
6177
6178
|
{
|
|
6178
6179
|
size: "small",
|
|
6179
6180
|
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
6180
6181
|
"aria-label": activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template")
|
|
6181
6182
|
},
|
|
6182
|
-
/* @__PURE__ */
|
|
6183
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6183
6184
|
))),
|
|
6184
|
-
/* @__PURE__ */
|
|
6185
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6185
6186
|
material.Tabs,
|
|
6186
6187
|
{
|
|
6187
6188
|
value: activeLeftTab,
|
|
@@ -6189,11 +6190,11 @@ function SamplesDrawer({
|
|
|
6189
6190
|
variant: "fullWidth",
|
|
6190
6191
|
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
6191
6192
|
},
|
|
6192
|
-
/* @__PURE__ */
|
|
6193
|
-
/* @__PURE__ */
|
|
6194
|
-
/* @__PURE__ */
|
|
6193
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "templates", label: t("drawer.tab.templates", "Templates"), disabled: !loadTemplates }),
|
|
6194
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "samples", label: t("drawer.tab.samples", "Samples") }),
|
|
6195
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "outline", label: t("drawer.tab.outline", "Outline") })
|
|
6195
6196
|
),
|
|
6196
|
-
activeLeftTab === "outline" ? /* @__PURE__ */
|
|
6197
|
+
activeLeftTab === "outline" ? /* @__PURE__ */ React62__default.default.createElement(OutlinePanel, null) : /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
6197
6198
|
material.TextField,
|
|
6198
6199
|
{
|
|
6199
6200
|
size: "small",
|
|
@@ -6201,10 +6202,10 @@ function SamplesDrawer({
|
|
|
6201
6202
|
value: search,
|
|
6202
6203
|
onChange: (e) => setSearch(e.target.value),
|
|
6203
6204
|
InputProps: {
|
|
6204
|
-
startAdornment: /* @__PURE__ */
|
|
6205
|
+
startAdornment: /* @__PURE__ */ React62__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
6205
6206
|
}
|
|
6206
6207
|
}
|
|
6207
|
-
), /* @__PURE__ */
|
|
6208
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
6208
6209
|
material.TextField,
|
|
6209
6210
|
{
|
|
6210
6211
|
select: true,
|
|
@@ -6213,8 +6214,8 @@ function SamplesDrawer({
|
|
|
6213
6214
|
value: sortKey,
|
|
6214
6215
|
onChange: (e) => setSortKey(e.target.value)
|
|
6215
6216
|
},
|
|
6216
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
6217
|
-
), allTags.length > 0 && /* @__PURE__ */
|
|
6217
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, t(opt.labelKey, opt.fallback)))
|
|
6218
|
+
), allTags.length > 0 && /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
6218
6219
|
material.Chip,
|
|
6219
6220
|
{
|
|
6220
6221
|
label: t("drawer.tag.all", "All"),
|
|
@@ -6224,18 +6225,18 @@ function SamplesDrawer({
|
|
|
6224
6225
|
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
6225
6226
|
onClick: () => setActiveTags([])
|
|
6226
6227
|
}
|
|
6227
|
-
), allTags.map((tag) => /* @__PURE__ */
|
|
6228
|
+
), allTags.map((tag) => /* @__PURE__ */ React62__default.default.createElement(
|
|
6228
6229
|
material.Chip,
|
|
6229
6230
|
{
|
|
6230
6231
|
key: tag,
|
|
6231
|
-
label: tag,
|
|
6232
|
+
label: t(`tag.${tag}`, tag),
|
|
6232
6233
|
size: "small",
|
|
6233
6234
|
clickable: true,
|
|
6234
6235
|
color: activeTags.includes(tag) ? "primary" : "default",
|
|
6235
6236
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
6236
6237
|
onClick: () => toggleTag(tag)
|
|
6237
6238
|
}
|
|
6238
|
-
))), activeLeftTab === "templates" ? /* @__PURE__ */
|
|
6239
|
+
))), activeLeftTab === "templates" ? /* @__PURE__ */ React62__default.default.createElement(material.Box, null, loadingTemplates ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React62__default.default.createElement(material.CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React62__default.default.createElement(material.Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React62__default.default.createElement(
|
|
6239
6240
|
TemplateRow,
|
|
6240
6241
|
{
|
|
6241
6242
|
key: template.id,
|
|
@@ -6247,7 +6248,7 @@ function SamplesDrawer({
|
|
|
6247
6248
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
6248
6249
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
6249
6250
|
}
|
|
6250
|
-
))) : /* @__PURE__ */
|
|
6251
|
+
))) : /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? t("drawer.no-templates", "No saved templates yet") : t("drawer.no-templates-match", "No templates match your filters"))) : /* @__PURE__ */ React62__default.default.createElement(material.Box, null, loadingSamples ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React62__default.default.createElement(material.CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React62__default.default.createElement(
|
|
6251
6252
|
TemplateRow,
|
|
6252
6253
|
{
|
|
6253
6254
|
key: sample.id,
|
|
@@ -6259,9 +6260,9 @@ function SamplesDrawer({
|
|
|
6259
6260
|
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
6260
6261
|
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
6261
6262
|
}
|
|
6262
|
-
))) : /* @__PURE__ */
|
|
6263
|
+
))) : /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? t("drawer.no-samples", "No samples available") : t("drawer.no-samples-match", "No samples match your filters"))))
|
|
6263
6264
|
)
|
|
6264
|
-
), renameTarget && /* @__PURE__ */
|
|
6265
|
+
), renameTarget && /* @__PURE__ */ React62__default.default.createElement(
|
|
6265
6266
|
RenameDialog,
|
|
6266
6267
|
{
|
|
6267
6268
|
open: !!renameTarget,
|
|
@@ -6271,7 +6272,7 @@ function SamplesDrawer({
|
|
|
6271
6272
|
onClose: () => setRenameTarget(null),
|
|
6272
6273
|
onSubmit: handleRenameSubmit
|
|
6273
6274
|
}
|
|
6274
|
-
), /* @__PURE__ */
|
|
6275
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
6275
6276
|
SaveTemplateDialog,
|
|
6276
6277
|
{
|
|
6277
6278
|
open: !!pendingSaveAs,
|
|
@@ -6284,7 +6285,7 @@ function SamplesDrawer({
|
|
|
6284
6285
|
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
6285
6286
|
error: newError
|
|
6286
6287
|
}
|
|
6287
|
-
), /* @__PURE__ */
|
|
6288
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
6288
6289
|
NewTemplatePickerDialog,
|
|
6289
6290
|
{
|
|
6290
6291
|
open: pickerKind !== null,
|
|
@@ -6308,7 +6309,7 @@ var ICON_SX = {
|
|
|
6308
6309
|
borderColor: "cadet.300"
|
|
6309
6310
|
};
|
|
6310
6311
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
6311
|
-
return /* @__PURE__ */
|
|
6312
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6312
6313
|
material.Button,
|
|
6313
6314
|
{
|
|
6314
6315
|
sx: BUTTON_SX2,
|
|
@@ -6317,14 +6318,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
6317
6318
|
onClick();
|
|
6318
6319
|
}
|
|
6319
6320
|
},
|
|
6320
|
-
/* @__PURE__ */
|
|
6321
|
-
/* @__PURE__ */
|
|
6321
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
6322
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
6322
6323
|
);
|
|
6323
6324
|
}
|
|
6324
6325
|
var BUTTONS = [
|
|
6325
6326
|
{
|
|
6326
6327
|
label: "Heading",
|
|
6327
|
-
icon: /* @__PURE__ */
|
|
6328
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
6328
6329
|
block: () => ({
|
|
6329
6330
|
type: "Heading",
|
|
6330
6331
|
data: {
|
|
@@ -6337,7 +6338,7 @@ var BUTTONS = [
|
|
|
6337
6338
|
},
|
|
6338
6339
|
{
|
|
6339
6340
|
label: "Text",
|
|
6340
|
-
icon: /* @__PURE__ */
|
|
6341
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
6341
6342
|
block: () => ({
|
|
6342
6343
|
type: "Text",
|
|
6343
6344
|
data: {
|
|
@@ -6351,7 +6352,7 @@ var BUTTONS = [
|
|
|
6351
6352
|
},
|
|
6352
6353
|
{
|
|
6353
6354
|
label: "Button",
|
|
6354
|
-
icon: /* @__PURE__ */
|
|
6355
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
6355
6356
|
block: () => ({
|
|
6356
6357
|
type: "Button",
|
|
6357
6358
|
data: {
|
|
@@ -6365,7 +6366,7 @@ var BUTTONS = [
|
|
|
6365
6366
|
},
|
|
6366
6367
|
{
|
|
6367
6368
|
label: "Image",
|
|
6368
|
-
icon: /* @__PURE__ */
|
|
6369
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
6369
6370
|
block: () => ({
|
|
6370
6371
|
type: "Image",
|
|
6371
6372
|
data: {
|
|
@@ -6381,7 +6382,7 @@ var BUTTONS = [
|
|
|
6381
6382
|
},
|
|
6382
6383
|
{
|
|
6383
6384
|
label: "Avatar",
|
|
6384
|
-
icon: /* @__PURE__ */
|
|
6385
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
6385
6386
|
block: () => ({
|
|
6386
6387
|
type: "Avatar",
|
|
6387
6388
|
data: {
|
|
@@ -6395,7 +6396,7 @@ var BUTTONS = [
|
|
|
6395
6396
|
},
|
|
6396
6397
|
{
|
|
6397
6398
|
label: "Personal Signature",
|
|
6398
|
-
icon: /* @__PURE__ */
|
|
6399
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
|
|
6399
6400
|
block: () => ({
|
|
6400
6401
|
type: "Signature",
|
|
6401
6402
|
data: {
|
|
@@ -6417,7 +6418,7 @@ var BUTTONS = [
|
|
|
6417
6418
|
},
|
|
6418
6419
|
{
|
|
6419
6420
|
label: "Company Signature",
|
|
6420
|
-
icon: /* @__PURE__ */
|
|
6421
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.BusinessOutlined, null),
|
|
6421
6422
|
block: () => ({
|
|
6422
6423
|
type: "Signature",
|
|
6423
6424
|
data: {
|
|
@@ -6437,7 +6438,7 @@ var BUTTONS = [
|
|
|
6437
6438
|
},
|
|
6438
6439
|
{
|
|
6439
6440
|
label: "Divider",
|
|
6440
|
-
icon: /* @__PURE__ */
|
|
6441
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
6441
6442
|
block: () => ({
|
|
6442
6443
|
type: "Divider",
|
|
6443
6444
|
data: {
|
|
@@ -6450,7 +6451,7 @@ var BUTTONS = [
|
|
|
6450
6451
|
},
|
|
6451
6452
|
{
|
|
6452
6453
|
label: "Spacer",
|
|
6453
|
-
icon: /* @__PURE__ */
|
|
6454
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
6454
6455
|
block: () => ({
|
|
6455
6456
|
type: "Spacer",
|
|
6456
6457
|
data: {}
|
|
@@ -6458,7 +6459,7 @@ var BUTTONS = [
|
|
|
6458
6459
|
},
|
|
6459
6460
|
{
|
|
6460
6461
|
label: "Html",
|
|
6461
|
-
icon: /* @__PURE__ */
|
|
6462
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
6462
6463
|
block: () => ({
|
|
6463
6464
|
type: "Html",
|
|
6464
6465
|
data: {
|
|
@@ -6473,7 +6474,7 @@ var BUTTONS = [
|
|
|
6473
6474
|
},
|
|
6474
6475
|
{
|
|
6475
6476
|
label: "Columns",
|
|
6476
|
-
icon: /* @__PURE__ */
|
|
6477
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
6477
6478
|
block: () => ({
|
|
6478
6479
|
type: "ColumnsContainer",
|
|
6479
6480
|
data: {
|
|
@@ -6488,7 +6489,7 @@ var BUTTONS = [
|
|
|
6488
6489
|
},
|
|
6489
6490
|
{
|
|
6490
6491
|
label: "Container",
|
|
6491
|
-
icon: /* @__PURE__ */
|
|
6492
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
6492
6493
|
block: () => ({
|
|
6493
6494
|
type: "Container",
|
|
6494
6495
|
data: {
|
|
@@ -6501,6 +6502,20 @@ var BUTTONS = [
|
|
|
6501
6502
|
];
|
|
6502
6503
|
|
|
6503
6504
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/blocks-menu.tsx
|
|
6505
|
+
var LABEL_KEYS = {
|
|
6506
|
+
Heading: "block-add.heading",
|
|
6507
|
+
Text: "block-add.text",
|
|
6508
|
+
Button: "block-add.button",
|
|
6509
|
+
Image: "block-add.image",
|
|
6510
|
+
Avatar: "block-add.avatar",
|
|
6511
|
+
"Personal Signature": "block-add.personal-signature",
|
|
6512
|
+
"Company Signature": "block-add.company-signature",
|
|
6513
|
+
Divider: "block-add.divider",
|
|
6514
|
+
Spacer: "block-add.spacer",
|
|
6515
|
+
Html: "block-add.html",
|
|
6516
|
+
Columns: "block-add.columns",
|
|
6517
|
+
Container: "block-add.container"
|
|
6518
|
+
};
|
|
6504
6519
|
function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
6505
6520
|
const onClose = () => {
|
|
6506
6521
|
setAnchorEl(null);
|
|
@@ -6512,7 +6527,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6512
6527
|
if (anchorEl === null) {
|
|
6513
6528
|
return null;
|
|
6514
6529
|
}
|
|
6515
|
-
return /* @__PURE__ */
|
|
6530
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6516
6531
|
material.Menu,
|
|
6517
6532
|
{
|
|
6518
6533
|
open: true,
|
|
@@ -6521,12 +6536,20 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6521
6536
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
6522
6537
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
6523
6538
|
},
|
|
6524
|
-
/* @__PURE__ */
|
|
6539
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React62__default.default.createElement(
|
|
6540
|
+
BlockTypeButton,
|
|
6541
|
+
{
|
|
6542
|
+
key: i,
|
|
6543
|
+
label: LABEL_KEYS[k.label] ? t(LABEL_KEYS[k.label], k.label) : k.label,
|
|
6544
|
+
icon: k.icon,
|
|
6545
|
+
onClick: () => onClick(k.block())
|
|
6546
|
+
}
|
|
6547
|
+
)))
|
|
6525
6548
|
);
|
|
6526
6549
|
}
|
|
6527
6550
|
function DividerButton({ buttonElement, onClick }) {
|
|
6528
|
-
const [visible, setVisible] =
|
|
6529
|
-
|
|
6551
|
+
const [visible, setVisible] = React62.useState(false);
|
|
6552
|
+
React62.useEffect(() => {
|
|
6530
6553
|
function listener({ clientX, clientY }) {
|
|
6531
6554
|
if (!buttonElement) {
|
|
6532
6555
|
return;
|
|
@@ -6548,7 +6571,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6548
6571
|
window.removeEventListener("mousemove", listener);
|
|
6549
6572
|
};
|
|
6550
6573
|
}, [buttonElement, setVisible]);
|
|
6551
|
-
return /* @__PURE__ */
|
|
6574
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React62__default.default.createElement(
|
|
6552
6575
|
material.IconButton,
|
|
6553
6576
|
{
|
|
6554
6577
|
size: "small",
|
|
@@ -6571,11 +6594,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6571
6594
|
onClick();
|
|
6572
6595
|
}
|
|
6573
6596
|
},
|
|
6574
|
-
/* @__PURE__ */
|
|
6597
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6575
6598
|
));
|
|
6576
6599
|
}
|
|
6577
6600
|
function PlaceholderButton({ onClick }) {
|
|
6578
|
-
return /* @__PURE__ */
|
|
6601
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6579
6602
|
material.ButtonBase,
|
|
6580
6603
|
{
|
|
6581
6604
|
onClick: (ev) => {
|
|
@@ -6591,7 +6614,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
6591
6614
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
6592
6615
|
}
|
|
6593
6616
|
},
|
|
6594
|
-
/* @__PURE__ */
|
|
6617
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6595
6618
|
iconsMaterial.AddOutlined,
|
|
6596
6619
|
{
|
|
6597
6620
|
sx: {
|
|
@@ -6608,29 +6631,29 @@ function PlaceholderButton({ onClick }) {
|
|
|
6608
6631
|
|
|
6609
6632
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
6610
6633
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
6611
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
6612
|
-
const [buttonElement, setButtonElement] =
|
|
6634
|
+
const [menuAnchorEl, setMenuAnchorEl] = React62.useState(null);
|
|
6635
|
+
const [buttonElement, setButtonElement] = React62.useState(null);
|
|
6613
6636
|
const handleButtonClick = () => {
|
|
6614
6637
|
setMenuAnchorEl(buttonElement);
|
|
6615
6638
|
};
|
|
6616
6639
|
const renderButton2 = () => {
|
|
6617
6640
|
if (placeholder) {
|
|
6618
|
-
return /* @__PURE__ */
|
|
6641
|
+
return /* @__PURE__ */ React62__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
6619
6642
|
} else {
|
|
6620
|
-
return /* @__PURE__ */
|
|
6643
|
+
return /* @__PURE__ */ React62__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
6621
6644
|
}
|
|
6622
6645
|
};
|
|
6623
|
-
return /* @__PURE__ */
|
|
6646
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React62__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
6624
6647
|
}
|
|
6625
|
-
var BlockParentContext =
|
|
6648
|
+
var BlockParentContext = React62.createContext(null);
|
|
6626
6649
|
function BlockParentProvider({
|
|
6627
6650
|
info,
|
|
6628
6651
|
children
|
|
6629
6652
|
}) {
|
|
6630
|
-
return /* @__PURE__ */
|
|
6653
|
+
return /* @__PURE__ */ React62__default.default.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6631
6654
|
}
|
|
6632
6655
|
function useBlockParent() {
|
|
6633
|
-
return
|
|
6656
|
+
return React62.useContext(BlockParentContext);
|
|
6634
6657
|
}
|
|
6635
6658
|
|
|
6636
6659
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -6657,9 +6680,9 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6657
6680
|
});
|
|
6658
6681
|
};
|
|
6659
6682
|
if (!childrenIds || childrenIds.length === 0) {
|
|
6660
|
-
return /* @__PURE__ */
|
|
6683
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock }), parentRef && /* @__PURE__ */ React62__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: 0, placeholder: true }));
|
|
6661
6684
|
}
|
|
6662
|
-
return /* @__PURE__ */
|
|
6685
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React62__default.default.createElement(React62.Fragment, { key: childId }, /* @__PURE__ */ React62__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), parentRef && /* @__PURE__ */ React62__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: i }), parentRef ? /* @__PURE__ */ React62__default.default.createElement(BlockParentProvider, { info: { parent: parentRef, indexInParent: i } }, /* @__PURE__ */ React62__default.default.createElement(EditorBlock, { id: childId })) : /* @__PURE__ */ React62__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React62__default.default.createElement(AddBlockButton, { onSelect: appendBlock }), parentRef && /* @__PURE__ */ React62__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: childrenIds.length }));
|
|
6663
6686
|
}
|
|
6664
6687
|
function CanvasDropZone({
|
|
6665
6688
|
parentRef,
|
|
@@ -6668,7 +6691,7 @@ function CanvasDropZone({
|
|
|
6668
6691
|
}) {
|
|
6669
6692
|
const document2 = useDocument();
|
|
6670
6693
|
const dragging = useDraggingBlock();
|
|
6671
|
-
const [over, setOver] =
|
|
6694
|
+
const [over, setOver] = React62.useState(false);
|
|
6672
6695
|
if (!dragging) return null;
|
|
6673
6696
|
if (isDescendant(document2, dragging.sourceId, parentRef.parentId)) return null;
|
|
6674
6697
|
const handleDragOver = (e) => {
|
|
@@ -6696,7 +6719,7 @@ function CanvasDropZone({
|
|
|
6696
6719
|
}
|
|
6697
6720
|
setDraggingBlock(null);
|
|
6698
6721
|
};
|
|
6699
|
-
return /* @__PURE__ */
|
|
6722
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6700
6723
|
material.Box,
|
|
6701
6724
|
{
|
|
6702
6725
|
onDragOver: handleDragOver,
|
|
@@ -6739,13 +6762,13 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6739
6762
|
});
|
|
6740
6763
|
setSelectedBlockId(blockId);
|
|
6741
6764
|
};
|
|
6742
|
-
return /* @__PURE__ */
|
|
6765
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6743
6766
|
columns_container_default,
|
|
6744
6767
|
{
|
|
6745
6768
|
props: restProps,
|
|
6746
6769
|
style,
|
|
6747
6770
|
columns: [
|
|
6748
|
-
/* @__PURE__ */
|
|
6771
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6749
6772
|
EditorChildrenIds,
|
|
6750
6773
|
{
|
|
6751
6774
|
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
@@ -6753,7 +6776,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6753
6776
|
onChange: (change) => updateColumn(0, change)
|
|
6754
6777
|
}
|
|
6755
6778
|
),
|
|
6756
|
-
/* @__PURE__ */
|
|
6779
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6757
6780
|
EditorChildrenIds,
|
|
6758
6781
|
{
|
|
6759
6782
|
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
@@ -6761,7 +6784,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6761
6784
|
onChange: (change) => updateColumn(1, change)
|
|
6762
6785
|
}
|
|
6763
6786
|
),
|
|
6764
|
-
/* @__PURE__ */
|
|
6787
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6765
6788
|
EditorChildrenIds,
|
|
6766
6789
|
{
|
|
6767
6790
|
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
@@ -6778,7 +6801,7 @@ function ContainerEditor({ style, props }) {
|
|
|
6778
6801
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
6779
6802
|
const document2 = useDocument();
|
|
6780
6803
|
const currentBlockId = useCurrentBlockId();
|
|
6781
|
-
return /* @__PURE__ */
|
|
6804
|
+
return /* @__PURE__ */ React62__default.default.createElement(container_default, { style }, /* @__PURE__ */ React62__default.default.createElement(
|
|
6782
6805
|
EditorChildrenIds,
|
|
6783
6806
|
{
|
|
6784
6807
|
childrenIds,
|
|
@@ -6885,7 +6908,7 @@ function EmailLayoutEditor(props) {
|
|
|
6885
6908
|
const document2 = useDocument();
|
|
6886
6909
|
const currentBlockId = useCurrentBlockId();
|
|
6887
6910
|
const selectedBlockId = useSelectedBlockId();
|
|
6888
|
-
const handleDelete =
|
|
6911
|
+
const handleDelete = React62.useCallback((e) => {
|
|
6889
6912
|
var _a2, _b2, _c2;
|
|
6890
6913
|
if (e.key !== "Delete" && e.key !== "Backspace") return;
|
|
6891
6914
|
if (!selectedBlockId) return;
|
|
@@ -6916,7 +6939,7 @@ function EmailLayoutEditor(props) {
|
|
|
6916
6939
|
delete nDocument[selectedBlockId];
|
|
6917
6940
|
replaceDocument(nDocument);
|
|
6918
6941
|
}, [selectedBlockId, document2]);
|
|
6919
|
-
const handleCopy =
|
|
6942
|
+
const handleCopy = React62.useCallback((e) => {
|
|
6920
6943
|
if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
|
|
6921
6944
|
if (!selectedBlockId) return;
|
|
6922
6945
|
const target = e.target;
|
|
@@ -6929,7 +6952,7 @@ function EmailLayoutEditor(props) {
|
|
|
6929
6952
|
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
|
|
6930
6953
|
navigator.clipboard.writeText(payload);
|
|
6931
6954
|
}, [selectedBlockId, document2]);
|
|
6932
|
-
const handlePaste =
|
|
6955
|
+
const handlePaste = React62.useCallback((e) => __async(null, null, function* () {
|
|
6933
6956
|
var _a2;
|
|
6934
6957
|
const target = e.target;
|
|
6935
6958
|
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
@@ -6960,7 +6983,7 @@ function EmailLayoutEditor(props) {
|
|
|
6960
6983
|
replaceDocument(doc);
|
|
6961
6984
|
setSelectedBlockId(newRootId);
|
|
6962
6985
|
}), [document2, childrenIds, selectedBlockId, currentBlockId]);
|
|
6963
|
-
|
|
6986
|
+
React62.useEffect(() => {
|
|
6964
6987
|
window.addEventListener("keydown", handleDelete);
|
|
6965
6988
|
window.addEventListener("keydown", handleCopy);
|
|
6966
6989
|
window.addEventListener("paste", handlePaste);
|
|
@@ -6979,7 +7002,7 @@ function EmailLayoutEditor(props) {
|
|
|
6979
7002
|
lineHeight: "1.5",
|
|
6980
7003
|
margin: "0"
|
|
6981
7004
|
};
|
|
6982
|
-
const editorChildren = /* @__PURE__ */
|
|
7005
|
+
const editorChildren = /* @__PURE__ */ React62__default.default.createElement(
|
|
6983
7006
|
EditorChildrenIds,
|
|
6984
7007
|
{
|
|
6985
7008
|
childrenIds,
|
|
@@ -7006,7 +7029,7 @@ function EmailLayoutEditor(props) {
|
|
|
7006
7029
|
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
7007
7030
|
};
|
|
7008
7031
|
if (props.backdropDisabled) {
|
|
7009
|
-
return /* @__PURE__ */
|
|
7032
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
7010
7033
|
"div",
|
|
7011
7034
|
{
|
|
7012
7035
|
onClick: () => {
|
|
@@ -7018,7 +7041,7 @@ function EmailLayoutEditor(props) {
|
|
|
7018
7041
|
minHeight: "100%"
|
|
7019
7042
|
})
|
|
7020
7043
|
},
|
|
7021
|
-
/* @__PURE__ */
|
|
7044
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
7022
7045
|
"div",
|
|
7023
7046
|
{
|
|
7024
7047
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -7026,11 +7049,11 @@ function EmailLayoutEditor(props) {
|
|
|
7026
7049
|
padding: "32px"
|
|
7027
7050
|
})
|
|
7028
7051
|
},
|
|
7029
|
-
/* @__PURE__ */
|
|
7052
|
+
/* @__PURE__ */ React62__default.default.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
7030
7053
|
)
|
|
7031
7054
|
);
|
|
7032
7055
|
}
|
|
7033
|
-
return /* @__PURE__ */
|
|
7056
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
7034
7057
|
"div",
|
|
7035
7058
|
{
|
|
7036
7059
|
onClick: () => {
|
|
@@ -7042,7 +7065,7 @@ function EmailLayoutEditor(props) {
|
|
|
7042
7065
|
minHeight: "100%"
|
|
7043
7066
|
})
|
|
7044
7067
|
},
|
|
7045
|
-
/* @__PURE__ */
|
|
7068
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
7046
7069
|
"div",
|
|
7047
7070
|
{
|
|
7048
7071
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -7050,7 +7073,7 @@ function EmailLayoutEditor(props) {
|
|
|
7050
7073
|
padding: "32px 0"
|
|
7051
7074
|
})
|
|
7052
7075
|
},
|
|
7053
|
-
/* @__PURE__ */
|
|
7076
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
7054
7077
|
"table",
|
|
7055
7078
|
{
|
|
7056
7079
|
align: "center",
|
|
@@ -7074,7 +7097,7 @@ function EmailLayoutEditor(props) {
|
|
|
7074
7097
|
cellPadding: "0",
|
|
7075
7098
|
border: 0
|
|
7076
7099
|
},
|
|
7077
|
-
/* @__PURE__ */
|
|
7100
|
+
/* @__PURE__ */ React62__default.default.createElement("tbody", null, /* @__PURE__ */ React62__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62__default.default.createElement("td", null, editorChildren)))
|
|
7078
7101
|
)
|
|
7079
7102
|
)
|
|
7080
7103
|
);
|
|
@@ -7234,7 +7257,7 @@ function TuneMenu({ blockId }) {
|
|
|
7234
7257
|
resetDocument(nDocument);
|
|
7235
7258
|
setSelectedBlockId(blockId);
|
|
7236
7259
|
};
|
|
7237
|
-
return /* @__PURE__ */
|
|
7260
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, null, /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tune.move-up", "Move up"), placement: "left-start" }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { "aria-label": t("tune.move-up", "Move up"), onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tune.move-down", "Move down"), placement: "left-start" }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { "aria-label": t("tune.move-down", "Move down"), onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tune.copy", "Copy block"), placement: "left-start" }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { "aria-label": t("tune.copy", "Copy block"), onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tune.delete", "Delete"), placement: "left-start" }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { "aria-label": t("tune.delete", "Delete"), onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
|
|
7238
7261
|
}
|
|
7239
7262
|
|
|
7240
7263
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
@@ -7243,7 +7266,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7243
7266
|
const hoveredBlockId = useHoveredBlockId();
|
|
7244
7267
|
const draggingBlock = useDraggingBlock();
|
|
7245
7268
|
const blockParent = useBlockParent();
|
|
7246
|
-
const [mouseInside, setMouseInside] =
|
|
7269
|
+
const [mouseInside, setMouseInside] = React62.useState(false);
|
|
7247
7270
|
const blockId = useCurrentBlockId();
|
|
7248
7271
|
const isBeingDragged = (draggingBlock == null ? void 0 : draggingBlock.sourceId) === blockId;
|
|
7249
7272
|
let outline;
|
|
@@ -7256,7 +7279,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7256
7279
|
if (selectedBlockId !== blockId) {
|
|
7257
7280
|
return null;
|
|
7258
7281
|
}
|
|
7259
|
-
return /* @__PURE__ */
|
|
7282
|
+
return /* @__PURE__ */ React62__default.default.createElement(TuneMenu, { blockId });
|
|
7260
7283
|
};
|
|
7261
7284
|
const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
|
|
7262
7285
|
const handleDragStart = (e) => {
|
|
@@ -7269,7 +7292,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7269
7292
|
const handleDragEnd = () => {
|
|
7270
7293
|
setDraggingBlock(null);
|
|
7271
7294
|
};
|
|
7272
|
-
return /* @__PURE__ */
|
|
7295
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
7273
7296
|
material.Box,
|
|
7274
7297
|
{
|
|
7275
7298
|
draggable,
|
|
@@ -7360,8 +7383,8 @@ function ButtonEditor({ style, props }) {
|
|
|
7360
7383
|
const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
|
|
7361
7384
|
const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
|
|
7362
7385
|
const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
|
|
7363
|
-
const [localText, setLocalText] =
|
|
7364
|
-
|
|
7386
|
+
const [localText, setLocalText] = React62.useState(text);
|
|
7387
|
+
React62.useEffect(() => {
|
|
7365
7388
|
setLocalText(text);
|
|
7366
7389
|
}, [text]);
|
|
7367
7390
|
const padding = getButtonSizePadding2(props);
|
|
@@ -7414,7 +7437,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7414
7437
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7415
7438
|
});
|
|
7416
7439
|
};
|
|
7417
|
-
return /* @__PURE__ */
|
|
7440
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62__default.default.createElement(
|
|
7418
7441
|
"input",
|
|
7419
7442
|
{
|
|
7420
7443
|
type: "text",
|
|
@@ -7431,18 +7454,18 @@ function ButtonEditor({ style, props }) {
|
|
|
7431
7454
|
}
|
|
7432
7455
|
));
|
|
7433
7456
|
}
|
|
7434
|
-
return /* @__PURE__ */
|
|
7457
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React62__default.default.createElement("span", null, text)));
|
|
7435
7458
|
}
|
|
7436
7459
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
7437
|
-
const textareaRef =
|
|
7438
|
-
const [selection, setSelection] =
|
|
7439
|
-
const [linkPrompt, setLinkPrompt] =
|
|
7440
|
-
const pendingSelectionRef =
|
|
7441
|
-
const textRef =
|
|
7442
|
-
|
|
7460
|
+
const textareaRef = React62.useRef(null);
|
|
7461
|
+
const [selection, setSelection] = React62.useState({ start: 0, end: 0 });
|
|
7462
|
+
const [linkPrompt, setLinkPrompt] = React62.useState(false);
|
|
7463
|
+
const pendingSelectionRef = React62.useRef(null);
|
|
7464
|
+
const textRef = React62.useRef(text);
|
|
7465
|
+
React62.useEffect(() => {
|
|
7443
7466
|
textRef.current = text;
|
|
7444
7467
|
}, [text]);
|
|
7445
|
-
const syncSelection =
|
|
7468
|
+
const syncSelection = React62.useCallback(
|
|
7446
7469
|
(start, end) => {
|
|
7447
7470
|
const next = { start, end };
|
|
7448
7471
|
setSelection(next);
|
|
@@ -7450,7 +7473,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7450
7473
|
},
|
|
7451
7474
|
[trackSelection]
|
|
7452
7475
|
);
|
|
7453
|
-
const trackFocus =
|
|
7476
|
+
const trackFocus = React62.useCallback(
|
|
7454
7477
|
(e) => {
|
|
7455
7478
|
var _a, _b;
|
|
7456
7479
|
const el = e.currentTarget;
|
|
@@ -7460,7 +7483,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7460
7483
|
},
|
|
7461
7484
|
[syncSelection]
|
|
7462
7485
|
);
|
|
7463
|
-
|
|
7486
|
+
React62.useEffect(() => {
|
|
7464
7487
|
const target = pendingSelectionRef.current;
|
|
7465
7488
|
if (!target) return;
|
|
7466
7489
|
const ta = textareaRef.current;
|
|
@@ -7470,7 +7493,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7470
7493
|
syncSelection(target.start, target.end);
|
|
7471
7494
|
pendingSelectionRef.current = null;
|
|
7472
7495
|
}, [text, syncSelection]);
|
|
7473
|
-
|
|
7496
|
+
React62.useEffect(() => {
|
|
7474
7497
|
if (!isSelected || selection.start === selection.end) {
|
|
7475
7498
|
setLinkPrompt(false);
|
|
7476
7499
|
}
|
|
@@ -7563,9 +7586,9 @@ function InlineFormattingToolbar({
|
|
|
7563
7586
|
onLinkSubmit,
|
|
7564
7587
|
onLinkCancel
|
|
7565
7588
|
}) {
|
|
7566
|
-
const [url, setUrl] =
|
|
7567
|
-
const inputRef =
|
|
7568
|
-
|
|
7589
|
+
const [url, setUrl] = React62.useState("");
|
|
7590
|
+
const inputRef = React62.useRef(null);
|
|
7591
|
+
React62.useEffect(() => {
|
|
7569
7592
|
if (linkPrompt) {
|
|
7570
7593
|
setUrl("");
|
|
7571
7594
|
setTimeout(() => {
|
|
@@ -7575,7 +7598,7 @@ function InlineFormattingToolbar({
|
|
|
7575
7598
|
}
|
|
7576
7599
|
}, [linkPrompt]);
|
|
7577
7600
|
const preventBlur = (e) => e.preventDefault();
|
|
7578
|
-
return /* @__PURE__ */
|
|
7601
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React62__default.default.createElement(material.Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, linkPrompt ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
7579
7602
|
material.TextField,
|
|
7580
7603
|
{
|
|
7581
7604
|
inputRef,
|
|
@@ -7597,7 +7620,7 @@ function InlineFormattingToolbar({
|
|
|
7597
7620
|
},
|
|
7598
7621
|
sx: { width: 220 }
|
|
7599
7622
|
}
|
|
7600
|
-
)) : /* @__PURE__ */
|
|
7623
|
+
)) : /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LinkOutlined, { fontSize: "small" })))));
|
|
7601
7624
|
}
|
|
7602
7625
|
|
|
7603
7626
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -7670,11 +7693,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7670
7693
|
const isSelected = selectedBlockId === blockId;
|
|
7671
7694
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
7672
7695
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
7673
|
-
const [localText, setLocalText] =
|
|
7696
|
+
const [localText, setLocalText] = React62.useState(textContent);
|
|
7674
7697
|
const isMarkdown = (_c = props == null ? void 0 : props.markdown) != null ? _c : false;
|
|
7675
7698
|
const rootBlock = document2.root;
|
|
7676
7699
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
7677
|
-
|
|
7700
|
+
React62.useEffect(() => {
|
|
7678
7701
|
setLocalText(textContent);
|
|
7679
7702
|
}, [textContent]);
|
|
7680
7703
|
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -7720,9 +7743,9 @@ function HeadingEditor({ style, props }) {
|
|
|
7720
7743
|
const handleTextChange = (e) => {
|
|
7721
7744
|
commitText(e.target.value);
|
|
7722
7745
|
};
|
|
7723
|
-
const displayRef =
|
|
7724
|
-
const lastDisplayHeightRef =
|
|
7725
|
-
|
|
7746
|
+
const displayRef = React62.useRef(null);
|
|
7747
|
+
const lastDisplayHeightRef = React62.useRef(0);
|
|
7748
|
+
React62.useLayoutEffect(() => {
|
|
7726
7749
|
if (!isSelected && displayRef.current) {
|
|
7727
7750
|
const h = displayRef.current.offsetHeight;
|
|
7728
7751
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -7748,11 +7771,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7748
7771
|
});
|
|
7749
7772
|
}
|
|
7750
7773
|
});
|
|
7751
|
-
|
|
7774
|
+
React62.useLayoutEffect(() => {
|
|
7752
7775
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7753
7776
|
}, [localText, isSelected]);
|
|
7754
7777
|
if (isSelected) {
|
|
7755
|
-
return /* @__PURE__ */
|
|
7778
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
7756
7779
|
"textarea",
|
|
7757
7780
|
{
|
|
7758
7781
|
ref: textareaRef,
|
|
@@ -7770,7 +7793,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7770
7793
|
rows: 1,
|
|
7771
7794
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7772
7795
|
}
|
|
7773
|
-
), /* @__PURE__ */
|
|
7796
|
+
), /* @__PURE__ */ React62__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7774
7797
|
}
|
|
7775
7798
|
const headingProps = isMarkdown ? {
|
|
7776
7799
|
ref: displayRef,
|
|
@@ -7779,11 +7802,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7779
7802
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
7780
7803
|
switch (level) {
|
|
7781
7804
|
case "h1":
|
|
7782
|
-
return /* @__PURE__ */
|
|
7805
|
+
return /* @__PURE__ */ React62__default.default.createElement("h1", __spreadValues({}, headingProps));
|
|
7783
7806
|
case "h2":
|
|
7784
|
-
return /* @__PURE__ */
|
|
7807
|
+
return /* @__PURE__ */ React62__default.default.createElement("h2", __spreadValues({}, headingProps));
|
|
7785
7808
|
case "h3":
|
|
7786
|
-
return /* @__PURE__ */
|
|
7809
|
+
return /* @__PURE__ */ React62__default.default.createElement("h3", __spreadValues({}, headingProps));
|
|
7787
7810
|
}
|
|
7788
7811
|
}
|
|
7789
7812
|
function HtmlEditor({ style, props }) {
|
|
@@ -7792,8 +7815,8 @@ function HtmlEditor({ style, props }) {
|
|
|
7792
7815
|
const selectedBlockId = useSelectedBlockId();
|
|
7793
7816
|
const isSelected = selectedBlockId === blockId;
|
|
7794
7817
|
const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
|
|
7795
|
-
const [localContents, setLocalContents] =
|
|
7796
|
-
|
|
7818
|
+
const [localContents, setLocalContents] = React62.useState(contents);
|
|
7819
|
+
React62.useEffect(() => {
|
|
7797
7820
|
setLocalContents(contents);
|
|
7798
7821
|
}, [contents]);
|
|
7799
7822
|
const cssStyle = {
|
|
@@ -7848,7 +7871,7 @@ function HtmlEditor({ style, props }) {
|
|
|
7848
7871
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7849
7872
|
});
|
|
7850
7873
|
};
|
|
7851
|
-
return /* @__PURE__ */
|
|
7874
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React62__default.default.createElement(
|
|
7852
7875
|
"textarea",
|
|
7853
7876
|
{
|
|
7854
7877
|
value: localContents,
|
|
@@ -7868,9 +7891,9 @@ function HtmlEditor({ style, props }) {
|
|
|
7868
7891
|
));
|
|
7869
7892
|
}
|
|
7870
7893
|
if (!contents) {
|
|
7871
|
-
return /* @__PURE__ */
|
|
7894
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle });
|
|
7872
7895
|
}
|
|
7873
|
-
return /* @__PURE__ */
|
|
7896
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
7874
7897
|
}
|
|
7875
7898
|
function getImageBorderRadius2(shape, size) {
|
|
7876
7899
|
switch (shape) {
|
|
@@ -7903,36 +7926,36 @@ function SignatureEditor({ style, props }) {
|
|
|
7903
7926
|
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
7904
7927
|
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
7905
7928
|
const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
|
|
7906
|
-
const [localGreeting, setLocalGreeting] =
|
|
7907
|
-
const [localName, setLocalName] =
|
|
7908
|
-
const [localTitle, setLocalTitle] =
|
|
7909
|
-
const [localCompany, setLocalCompany] =
|
|
7910
|
-
const [localAddress, setLocalAddress] =
|
|
7911
|
-
const [localEmail, setLocalEmail] =
|
|
7912
|
-
const [localPhone, setLocalPhone] =
|
|
7913
|
-
const [localWebsite, setLocalWebsite] =
|
|
7914
|
-
|
|
7929
|
+
const [localGreeting, setLocalGreeting] = React62.useState(greeting);
|
|
7930
|
+
const [localName, setLocalName] = React62.useState(name);
|
|
7931
|
+
const [localTitle, setLocalTitle] = React62.useState(title);
|
|
7932
|
+
const [localCompany, setLocalCompany] = React62.useState(company);
|
|
7933
|
+
const [localAddress, setLocalAddress] = React62.useState(address);
|
|
7934
|
+
const [localEmail, setLocalEmail] = React62.useState(email);
|
|
7935
|
+
const [localPhone, setLocalPhone] = React62.useState(phone);
|
|
7936
|
+
const [localWebsite, setLocalWebsite] = React62.useState(website);
|
|
7937
|
+
React62.useEffect(() => {
|
|
7915
7938
|
setLocalGreeting(greeting);
|
|
7916
7939
|
}, [greeting]);
|
|
7917
|
-
|
|
7940
|
+
React62.useEffect(() => {
|
|
7918
7941
|
setLocalName(name);
|
|
7919
7942
|
}, [name]);
|
|
7920
|
-
|
|
7943
|
+
React62.useEffect(() => {
|
|
7921
7944
|
setLocalTitle(title);
|
|
7922
7945
|
}, [title]);
|
|
7923
|
-
|
|
7946
|
+
React62.useEffect(() => {
|
|
7924
7947
|
setLocalCompany(company);
|
|
7925
7948
|
}, [company]);
|
|
7926
|
-
|
|
7949
|
+
React62.useEffect(() => {
|
|
7927
7950
|
setLocalAddress(address);
|
|
7928
7951
|
}, [address]);
|
|
7929
|
-
|
|
7952
|
+
React62.useEffect(() => {
|
|
7930
7953
|
setLocalEmail(email);
|
|
7931
7954
|
}, [email]);
|
|
7932
|
-
|
|
7955
|
+
React62.useEffect(() => {
|
|
7933
7956
|
setLocalPhone(phone);
|
|
7934
7957
|
}, [phone]);
|
|
7935
|
-
|
|
7958
|
+
React62.useEffect(() => {
|
|
7936
7959
|
setLocalWebsite(website);
|
|
7937
7960
|
}, [website]);
|
|
7938
7961
|
const updateProps = (updates) => {
|
|
@@ -7985,7 +8008,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7985
8008
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
7986
8009
|
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
|
|
7987
8010
|
};
|
|
7988
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
8011
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React62__default.default.createElement(
|
|
7989
8012
|
"img",
|
|
7990
8013
|
{
|
|
7991
8014
|
src: imageUrl,
|
|
@@ -8003,7 +8026,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8003
8026
|
}
|
|
8004
8027
|
}
|
|
8005
8028
|
) : null;
|
|
8006
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
8029
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React62__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8007
8030
|
"input",
|
|
8008
8031
|
{
|
|
8009
8032
|
value: localGreeting,
|
|
@@ -8014,8 +8037,8 @@ function SignatureEditor({ style, props }) {
|
|
|
8014
8037
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
8015
8038
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
8016
8039
|
}
|
|
8017
|
-
)) : greeting ? /* @__PURE__ */
|
|
8018
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
8040
|
+
)) : greeting ? /* @__PURE__ */ React62__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
8041
|
+
const textContent = isSelected ? /* @__PURE__ */ React62__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8019
8042
|
"input",
|
|
8020
8043
|
{
|
|
8021
8044
|
value: localName,
|
|
@@ -8026,7 +8049,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8026
8049
|
placeholder: "Name",
|
|
8027
8050
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
8028
8051
|
}
|
|
8029
|
-
), /* @__PURE__ */
|
|
8052
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8030
8053
|
"input",
|
|
8031
8054
|
{
|
|
8032
8055
|
value: localTitle,
|
|
@@ -8037,7 +8060,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8037
8060
|
placeholder: "Title",
|
|
8038
8061
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8039
8062
|
}
|
|
8040
|
-
), /* @__PURE__ */
|
|
8063
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8041
8064
|
"input",
|
|
8042
8065
|
{
|
|
8043
8066
|
value: localCompany,
|
|
@@ -8048,7 +8071,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8048
8071
|
placeholder: "Company",
|
|
8049
8072
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8050
8073
|
}
|
|
8051
|
-
), /* @__PURE__ */
|
|
8074
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8052
8075
|
"input",
|
|
8053
8076
|
{
|
|
8054
8077
|
value: localAddress,
|
|
@@ -8059,7 +8082,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8059
8082
|
placeholder: "Address",
|
|
8060
8083
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8061
8084
|
}
|
|
8062
|
-
), /* @__PURE__ */
|
|
8085
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8063
8086
|
"input",
|
|
8064
8087
|
{
|
|
8065
8088
|
value: localEmail,
|
|
@@ -8070,7 +8093,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8070
8093
|
placeholder: "Email",
|
|
8071
8094
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
8072
8095
|
}
|
|
8073
|
-
), /* @__PURE__ */
|
|
8096
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8074
8097
|
"input",
|
|
8075
8098
|
{
|
|
8076
8099
|
value: localPhone,
|
|
@@ -8081,7 +8104,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8081
8104
|
placeholder: "Phone",
|
|
8082
8105
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
8083
8106
|
}
|
|
8084
|
-
), /* @__PURE__ */
|
|
8107
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8085
8108
|
"input",
|
|
8086
8109
|
{
|
|
8087
8110
|
value: localWebsite,
|
|
@@ -8092,11 +8115,11 @@ function SignatureEditor({ style, props }) {
|
|
|
8092
8115
|
placeholder: "Website",
|
|
8093
8116
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
8094
8117
|
}
|
|
8095
|
-
)) : /* @__PURE__ */
|
|
8118
|
+
)) : /* @__PURE__ */ React62__default.default.createElement("div", null, name && /* @__PURE__ */ React62__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React62__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React62__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React62__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React62__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React62__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React62__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React62__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React62__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React62__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React62__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
|
|
8096
8119
|
if (layout === "vertical") {
|
|
8097
|
-
return /* @__PURE__ */
|
|
8120
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React62__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
8098
8121
|
}
|
|
8099
|
-
return /* @__PURE__ */
|
|
8122
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React62__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React62__default.default.createElement("tbody", null, /* @__PURE__ */ React62__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React62__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React62__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
8100
8123
|
}
|
|
8101
8124
|
function getFontFamily10(fontFamily) {
|
|
8102
8125
|
switch (fontFamily) {
|
|
@@ -8156,11 +8179,11 @@ function TextEditor({ style, props }) {
|
|
|
8156
8179
|
const document2 = useDocument();
|
|
8157
8180
|
const isSelected = selectedBlockId === blockId;
|
|
8158
8181
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
8159
|
-
const [localText, setLocalText] =
|
|
8182
|
+
const [localText, setLocalText] = React62.useState(textContent);
|
|
8160
8183
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
8161
8184
|
const rootBlock = document2.root;
|
|
8162
8185
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
8163
|
-
|
|
8186
|
+
React62.useEffect(() => {
|
|
8164
8187
|
setLocalText(textContent);
|
|
8165
8188
|
}, [textContent]);
|
|
8166
8189
|
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -8208,9 +8231,9 @@ function TextEditor({ style, props }) {
|
|
|
8208
8231
|
const handleTextChange = (e) => {
|
|
8209
8232
|
commitText(e.target.value);
|
|
8210
8233
|
};
|
|
8211
|
-
const displayRef =
|
|
8212
|
-
const lastDisplayHeightRef =
|
|
8213
|
-
|
|
8234
|
+
const displayRef = React62.useRef(null);
|
|
8235
|
+
const lastDisplayHeightRef = React62.useRef(0);
|
|
8236
|
+
React62.useLayoutEffect(() => {
|
|
8214
8237
|
if (!isSelected && displayRef.current) {
|
|
8215
8238
|
const h = displayRef.current.offsetHeight;
|
|
8216
8239
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -8236,11 +8259,11 @@ function TextEditor({ style, props }) {
|
|
|
8236
8259
|
});
|
|
8237
8260
|
}
|
|
8238
8261
|
});
|
|
8239
|
-
|
|
8262
|
+
React62.useLayoutEffect(() => {
|
|
8240
8263
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
8241
8264
|
}, [localText, isSelected]);
|
|
8242
8265
|
if (isSelected) {
|
|
8243
|
-
return /* @__PURE__ */
|
|
8266
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
8244
8267
|
"textarea",
|
|
8245
8268
|
{
|
|
8246
8269
|
ref: textareaRef,
|
|
@@ -8258,10 +8281,10 @@ function TextEditor({ style, props }) {
|
|
|
8258
8281
|
rows: 1,
|
|
8259
8282
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
8260
8283
|
}
|
|
8261
|
-
), /* @__PURE__ */
|
|
8284
|
+
), /* @__PURE__ */ React62__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
8262
8285
|
}
|
|
8263
8286
|
if (isMarkdown) {
|
|
8264
|
-
return /* @__PURE__ */
|
|
8287
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8265
8288
|
"div",
|
|
8266
8289
|
{
|
|
8267
8290
|
ref: displayRef,
|
|
@@ -8270,34 +8293,34 @@ function TextEditor({ style, props }) {
|
|
|
8270
8293
|
}
|
|
8271
8294
|
);
|
|
8272
8295
|
}
|
|
8273
|
-
return /* @__PURE__ */
|
|
8296
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
8274
8297
|
}
|
|
8275
8298
|
|
|
8276
8299
|
// src/editor/core.tsx
|
|
8277
8300
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
8278
8301
|
Avatar: {
|
|
8279
8302
|
schema: AvatarPropsSchema,
|
|
8280
|
-
Component: (props) => /* @__PURE__ */
|
|
8303
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
8281
8304
|
},
|
|
8282
8305
|
Button: {
|
|
8283
8306
|
schema: ButtonPropsSchema,
|
|
8284
|
-
Component: (props) => /* @__PURE__ */
|
|
8307
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
8285
8308
|
},
|
|
8286
8309
|
Container: {
|
|
8287
8310
|
schema: container_props_schema_default,
|
|
8288
|
-
Component: (props) => /* @__PURE__ */
|
|
8311
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
8289
8312
|
},
|
|
8290
8313
|
ColumnsContainer: {
|
|
8291
8314
|
schema: columns_container_props_schema_default2,
|
|
8292
|
-
Component: (props) => /* @__PURE__ */
|
|
8315
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
8293
8316
|
},
|
|
8294
8317
|
Heading: {
|
|
8295
8318
|
schema: HeadingPropsSchema,
|
|
8296
|
-
Component: (props) => /* @__PURE__ */
|
|
8319
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
8297
8320
|
},
|
|
8298
8321
|
Html: {
|
|
8299
8322
|
schema: HtmlPropsSchema,
|
|
8300
|
-
Component: (props) => /* @__PURE__ */
|
|
8323
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
8301
8324
|
},
|
|
8302
8325
|
Image: {
|
|
8303
8326
|
schema: ImagePropsSchema,
|
|
@@ -8309,28 +8332,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
8309
8332
|
linkHref: null
|
|
8310
8333
|
})
|
|
8311
8334
|
});
|
|
8312
|
-
return /* @__PURE__ */
|
|
8335
|
+
return /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
8313
8336
|
}
|
|
8314
8337
|
},
|
|
8315
8338
|
Text: {
|
|
8316
8339
|
schema: TextPropsSchema,
|
|
8317
|
-
Component: (props) => /* @__PURE__ */
|
|
8340
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
8318
8341
|
},
|
|
8319
8342
|
EmailLayout: {
|
|
8320
8343
|
schema: email_layout_props_schema_default,
|
|
8321
|
-
Component: (p) => /* @__PURE__ */
|
|
8344
|
+
Component: (p) => /* @__PURE__ */ React62__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
8322
8345
|
},
|
|
8323
8346
|
Spacer: {
|
|
8324
8347
|
schema: SpacerPropsSchema,
|
|
8325
|
-
Component: (props) => /* @__PURE__ */
|
|
8348
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
8326
8349
|
},
|
|
8327
8350
|
Divider: {
|
|
8328
8351
|
schema: DividerPropsSchema,
|
|
8329
|
-
Component: (props) => /* @__PURE__ */
|
|
8352
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
8330
8353
|
},
|
|
8331
8354
|
Signature: {
|
|
8332
8355
|
schema: SignaturePropsSchema,
|
|
8333
|
-
Component: (props) => /* @__PURE__ */
|
|
8356
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
8334
8357
|
}
|
|
8335
8358
|
});
|
|
8336
8359
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -8338,15 +8361,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
8338
8361
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
8339
8362
|
|
|
8340
8363
|
// src/editor/editor-block.tsx
|
|
8341
|
-
var EditorBlockContext =
|
|
8342
|
-
var useCurrentBlockId = () =>
|
|
8364
|
+
var EditorBlockContext = React62.createContext(null);
|
|
8365
|
+
var useCurrentBlockId = () => React62.useContext(EditorBlockContext);
|
|
8343
8366
|
function EditorBlock({ id }) {
|
|
8344
8367
|
const document2 = useDocument();
|
|
8345
8368
|
const block = document2[id];
|
|
8346
8369
|
if (!block) {
|
|
8347
8370
|
throw new Error("Could not find block");
|
|
8348
8371
|
}
|
|
8349
|
-
return /* @__PURE__ */
|
|
8372
|
+
return /* @__PURE__ */ React62__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React62__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
8350
8373
|
}
|
|
8351
8374
|
function ToggleInspectorPanelButton() {
|
|
8352
8375
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -8354,20 +8377,20 @@ function ToggleInspectorPanelButton() {
|
|
|
8354
8377
|
toggleInspectorDrawerOpen();
|
|
8355
8378
|
};
|
|
8356
8379
|
if (inspectorDrawerOpen) {
|
|
8357
|
-
return /* @__PURE__ */
|
|
8380
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
8358
8381
|
}
|
|
8359
|
-
return /* @__PURE__ */
|
|
8382
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
8360
8383
|
}
|
|
8361
8384
|
function useIcon() {
|
|
8362
8385
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8363
8386
|
if (samplesDrawerOpen) {
|
|
8364
|
-
return /* @__PURE__ */
|
|
8387
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
8365
8388
|
}
|
|
8366
|
-
return /* @__PURE__ */
|
|
8389
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
8367
8390
|
}
|
|
8368
8391
|
function ToggleSamplesPanelButton() {
|
|
8369
8392
|
const icon = useIcon();
|
|
8370
|
-
return /* @__PURE__ */
|
|
8393
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
8371
8394
|
}
|
|
8372
8395
|
function formatHtml(html2, spaces = 2) {
|
|
8373
8396
|
try {
|
|
@@ -8415,8 +8438,8 @@ function json(value) {
|
|
|
8415
8438
|
|
|
8416
8439
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
8417
8440
|
function HighlightedCodePanel({ type, value }) {
|
|
8418
|
-
const [code, setCode] =
|
|
8419
|
-
|
|
8441
|
+
const [code, setCode] = React62.useState(null);
|
|
8442
|
+
React62.useEffect(() => {
|
|
8420
8443
|
switch (type) {
|
|
8421
8444
|
case "html":
|
|
8422
8445
|
html(value).then(setCode);
|
|
@@ -8429,7 +8452,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8429
8452
|
if (code === null) {
|
|
8430
8453
|
return null;
|
|
8431
8454
|
}
|
|
8432
|
-
return /* @__PURE__ */
|
|
8455
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8433
8456
|
"pre",
|
|
8434
8457
|
{
|
|
8435
8458
|
style: {
|
|
@@ -8454,18 +8477,18 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8454
8477
|
// src/app/email-canvas/html-panel.tsx
|
|
8455
8478
|
function HtmlPanel() {
|
|
8456
8479
|
const document2 = useDocument();
|
|
8457
|
-
const code =
|
|
8458
|
-
return /* @__PURE__ */
|
|
8480
|
+
const code = React62.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
8481
|
+
return /* @__PURE__ */ React62__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
8459
8482
|
}
|
|
8460
8483
|
function JsonPanel() {
|
|
8461
8484
|
const document2 = useDocument();
|
|
8462
|
-
const code =
|
|
8463
|
-
return /* @__PURE__ */
|
|
8485
|
+
const code = React62.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
8486
|
+
return /* @__PURE__ */ React62__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
8464
8487
|
}
|
|
8465
8488
|
function TextPanel() {
|
|
8466
8489
|
const document2 = useDocument();
|
|
8467
|
-
const text =
|
|
8468
|
-
return /* @__PURE__ */
|
|
8490
|
+
const text = React62.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
8491
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8469
8492
|
"pre",
|
|
8470
8493
|
{
|
|
8471
8494
|
style: {
|
|
@@ -8501,35 +8524,35 @@ function MainTabsGroup() {
|
|
|
8501
8524
|
setSelectedMainTab("editor");
|
|
8502
8525
|
}
|
|
8503
8526
|
};
|
|
8504
|
-
return /* @__PURE__ */
|
|
8527
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8505
8528
|
material.Tab,
|
|
8506
8529
|
{
|
|
8507
8530
|
value: "editor",
|
|
8508
|
-
label: /* @__PURE__ */
|
|
8531
|
+
label: /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tab.edit", "Edit") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
8509
8532
|
}
|
|
8510
|
-
), /* @__PURE__ */
|
|
8533
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8511
8534
|
material.Tab,
|
|
8512
8535
|
{
|
|
8513
8536
|
value: "preview",
|
|
8514
|
-
label: /* @__PURE__ */
|
|
8537
|
+
label: /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tab.preview", "Preview") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
8515
8538
|
}
|
|
8516
|
-
), /* @__PURE__ */
|
|
8539
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8517
8540
|
material.Tab,
|
|
8518
8541
|
{
|
|
8519
8542
|
value: "html",
|
|
8520
|
-
label: /* @__PURE__ */
|
|
8543
|
+
label: /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tab.html-output", "HTML output") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
8521
8544
|
}
|
|
8522
|
-
), /* @__PURE__ */
|
|
8545
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8523
8546
|
material.Tab,
|
|
8524
8547
|
{
|
|
8525
8548
|
value: "text",
|
|
8526
|
-
label: /* @__PURE__ */
|
|
8549
|
+
label: /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tab.text-output", "Plain text output") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
8527
8550
|
}
|
|
8528
|
-
), /* @__PURE__ */
|
|
8551
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8529
8552
|
material.Tab,
|
|
8530
8553
|
{
|
|
8531
8554
|
value: "json",
|
|
8532
|
-
label: /* @__PURE__ */
|
|
8555
|
+
label: /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tab.json-output", "JSON output") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
8533
8556
|
}
|
|
8534
8557
|
));
|
|
8535
8558
|
}
|
|
@@ -8544,8 +8567,8 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8544
8567
|
} = useEmailEditor();
|
|
8545
8568
|
const { showMessage } = useSnackbar();
|
|
8546
8569
|
const document2 = useDocument();
|
|
8547
|
-
const [dialogMode, setDialogMode] =
|
|
8548
|
-
const [nameError, setNameError] =
|
|
8570
|
+
const [dialogMode, setDialogMode] = React62.useState(null);
|
|
8571
|
+
const [nameError, setNameError] = React62.useState(null);
|
|
8549
8572
|
const hasOpenRow = Boolean(currentTemplateId);
|
|
8550
8573
|
const isSample = currentTemplateKind === "sample";
|
|
8551
8574
|
const primaryLabel = hasOpenRow ? t("savebar.save", "Save") : t("savebar.save-as-new", "Save as new\u2026");
|
|
@@ -8584,7 +8607,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8584
8607
|
return false;
|
|
8585
8608
|
}
|
|
8586
8609
|
});
|
|
8587
|
-
return /* @__PURE__ */
|
|
8610
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
8588
8611
|
material.Box,
|
|
8589
8612
|
{
|
|
8590
8613
|
sx: {
|
|
@@ -8597,7 +8620,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8597
8620
|
pb: 3
|
|
8598
8621
|
}
|
|
8599
8622
|
},
|
|
8600
|
-
/* @__PURE__ */
|
|
8623
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
8601
8624
|
material.Box,
|
|
8602
8625
|
{
|
|
8603
8626
|
sx: {
|
|
@@ -8612,7 +8635,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8612
8635
|
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
8613
8636
|
}
|
|
8614
8637
|
},
|
|
8615
|
-
hasOpenRow && currentTemplateName && /* @__PURE__ */
|
|
8638
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React62__default.default.createElement(
|
|
8616
8639
|
material.Box,
|
|
8617
8640
|
{
|
|
8618
8641
|
sx: {
|
|
@@ -8628,25 +8651,25 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8628
8651
|
title: currentTemplateName
|
|
8629
8652
|
},
|
|
8630
8653
|
isSample ? `${t("savebar.sample-prefix", "Sample")} \xB7 ` : "",
|
|
8631
|
-
/* @__PURE__ */
|
|
8654
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8632
8655
|
),
|
|
8633
|
-
/* @__PURE__ */
|
|
8656
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: hasOpenRow ? isSample ? t("savebar.save-changes-to-sample", "Save changes to this sample") : t("savebar.save-changes", "Save changes") : t("savebar.save-as-new-template", "Save as a new template") }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8634
8657
|
material.Button,
|
|
8635
8658
|
{
|
|
8636
8659
|
variant: "contained",
|
|
8637
8660
|
size: "large",
|
|
8638
|
-
startIcon: /* @__PURE__ */
|
|
8661
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SaveOutlined, null),
|
|
8639
8662
|
onClick: handlePrimary,
|
|
8640
8663
|
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8641
8664
|
},
|
|
8642
8665
|
primaryLabel
|
|
8643
8666
|
)),
|
|
8644
|
-
hasOpenRow && saveAs && /* @__PURE__ */
|
|
8667
|
+
hasOpenRow && saveAs && /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("savebar.save-as-new-template", "Save as a new template") }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8645
8668
|
material.Button,
|
|
8646
8669
|
{
|
|
8647
8670
|
variant: "outlined",
|
|
8648
8671
|
size: "large",
|
|
8649
|
-
startIcon: /* @__PURE__ */
|
|
8672
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SaveAsOutlined, null),
|
|
8650
8673
|
onClick: () => {
|
|
8651
8674
|
setNameError(null);
|
|
8652
8675
|
setDialogMode("save-as");
|
|
@@ -8655,12 +8678,12 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8655
8678
|
},
|
|
8656
8679
|
t("savebar.save-as", "Save as\u2026")
|
|
8657
8680
|
)),
|
|
8658
|
-
saveAs && /* @__PURE__ */
|
|
8681
|
+
saveAs && /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("savebar.start-fresh", "Start a fresh template") }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8659
8682
|
material.Button,
|
|
8660
8683
|
{
|
|
8661
8684
|
variant: "text",
|
|
8662
8685
|
size: "large",
|
|
8663
|
-
startIcon: /* @__PURE__ */
|
|
8686
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
8664
8687
|
onClick: () => {
|
|
8665
8688
|
setNameError(null);
|
|
8666
8689
|
setDialogMode("new-blank");
|
|
@@ -8670,7 +8693,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8670
8693
|
t("savebar.new", "New")
|
|
8671
8694
|
))
|
|
8672
8695
|
)
|
|
8673
|
-
), /* @__PURE__ */
|
|
8696
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8674
8697
|
SaveTemplateDialog,
|
|
8675
8698
|
{
|
|
8676
8699
|
open: dialogMode !== null,
|
|
@@ -8707,7 +8730,7 @@ function UndoRedoButtons() {
|
|
|
8707
8730
|
const modKey = mac ? "\u2318" : "Ctrl";
|
|
8708
8731
|
const undoHint = `${modKey}+Z`;
|
|
8709
8732
|
const redoHint = mac ? `${modKey}+\u21E7+Z` : `${modKey}+Shift+Z / ${modKey}+Y`;
|
|
8710
|
-
|
|
8733
|
+
React62.useEffect(() => {
|
|
8711
8734
|
const onKeyDown = (e) => {
|
|
8712
8735
|
const mod = mac ? e.metaKey : e.ctrlKey;
|
|
8713
8736
|
if (!mod) return;
|
|
@@ -8724,7 +8747,7 @@ function UndoRedoButtons() {
|
|
|
8724
8747
|
window.addEventListener("keydown", onKeyDown);
|
|
8725
8748
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
8726
8749
|
}, [mac]);
|
|
8727
|
-
return /* @__PURE__ */
|
|
8750
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: `${t("undo.tooltip", "Undo")} (${undoHint})` }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
8728
8751
|
material.IconButton,
|
|
8729
8752
|
{
|
|
8730
8753
|
size: "small",
|
|
@@ -8732,8 +8755,8 @@ function UndoRedoButtons() {
|
|
|
8732
8755
|
disabled: !canUndo,
|
|
8733
8756
|
"aria-label": t("undo.label", "Undo")
|
|
8734
8757
|
},
|
|
8735
|
-
/* @__PURE__ */
|
|
8736
|
-
))), /* @__PURE__ */
|
|
8758
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.UndoOutlined, { fontSize: "small" })
|
|
8759
|
+
))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: `${t("redo.tooltip", "Redo")} (${redoHint})` }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
8737
8760
|
material.IconButton,
|
|
8738
8761
|
{
|
|
8739
8762
|
size: "small",
|
|
@@ -8741,7 +8764,7 @@ function UndoRedoButtons() {
|
|
|
8741
8764
|
disabled: !canRedo,
|
|
8742
8765
|
"aria-label": t("redo.label", "Redo")
|
|
8743
8766
|
},
|
|
8744
|
-
/* @__PURE__ */
|
|
8767
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.RedoOutlined, { fontSize: "small" })
|
|
8745
8768
|
))));
|
|
8746
8769
|
}
|
|
8747
8770
|
function SubjectInput() {
|
|
@@ -8767,7 +8790,7 @@ function SubjectInput() {
|
|
|
8767
8790
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
8768
8791
|
});
|
|
8769
8792
|
};
|
|
8770
|
-
return /* @__PURE__ */
|
|
8793
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8771
8794
|
material.Box,
|
|
8772
8795
|
{
|
|
8773
8796
|
sx: {
|
|
@@ -8784,8 +8807,8 @@ function SubjectInput() {
|
|
|
8784
8807
|
gap: 1.5
|
|
8785
8808
|
}
|
|
8786
8809
|
},
|
|
8787
|
-
/* @__PURE__ */
|
|
8788
|
-
/* @__PURE__ */
|
|
8810
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8811
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
8789
8812
|
material.InputBase,
|
|
8790
8813
|
{
|
|
8791
8814
|
fullWidth: true,
|
|
@@ -8811,7 +8834,7 @@ function SubjectPreview() {
|
|
|
8811
8834
|
if (!subject) return null;
|
|
8812
8835
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
8813
8836
|
const rendered = substituteSampleValues(subject, samples);
|
|
8814
|
-
return /* @__PURE__ */
|
|
8837
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8815
8838
|
material.Box,
|
|
8816
8839
|
{
|
|
8817
8840
|
sx: {
|
|
@@ -8828,8 +8851,8 @@ function SubjectPreview() {
|
|
|
8828
8851
|
gap: 1.5
|
|
8829
8852
|
}
|
|
8830
8853
|
},
|
|
8831
|
-
/* @__PURE__ */
|
|
8832
|
-
/* @__PURE__ */
|
|
8854
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8855
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { fontSize: 14 } }, rendered)
|
|
8833
8856
|
);
|
|
8834
8857
|
}
|
|
8835
8858
|
function generateId3() {
|
|
@@ -8876,12 +8899,12 @@ function findImageFile(items) {
|
|
|
8876
8899
|
}
|
|
8877
8900
|
function ImageDropPasteHandler({ enabled, children }) {
|
|
8878
8901
|
const { uploadImage } = useImageCallbacks();
|
|
8879
|
-
const wrapperRef =
|
|
8880
|
-
const dragDepth =
|
|
8881
|
-
const [dragging, setDragging] =
|
|
8882
|
-
const [uploading, setUploading] =
|
|
8902
|
+
const wrapperRef = React62.useRef(null);
|
|
8903
|
+
const dragDepth = React62.useRef(0);
|
|
8904
|
+
const [dragging, setDragging] = React62.useState(false);
|
|
8905
|
+
const [uploading, setUploading] = React62.useState(false);
|
|
8883
8906
|
const active = enabled && Boolean(uploadImage);
|
|
8884
|
-
|
|
8907
|
+
React62.useEffect(() => {
|
|
8885
8908
|
if (!active || !uploadImage) return;
|
|
8886
8909
|
const handlePaste = (e) => __async(null, null, function* () {
|
|
8887
8910
|
var _a;
|
|
@@ -8902,7 +8925,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8902
8925
|
window.addEventListener("paste", handlePaste);
|
|
8903
8926
|
return () => window.removeEventListener("paste", handlePaste);
|
|
8904
8927
|
}, [active, uploadImage]);
|
|
8905
|
-
if (!active) return /* @__PURE__ */
|
|
8928
|
+
if (!active) return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, children);
|
|
8906
8929
|
const onDragEnter = (e) => {
|
|
8907
8930
|
var _a, _b;
|
|
8908
8931
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -8935,7 +8958,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8935
8958
|
setUploading(false);
|
|
8936
8959
|
}
|
|
8937
8960
|
});
|
|
8938
|
-
return /* @__PURE__ */
|
|
8961
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8939
8962
|
material.Box,
|
|
8940
8963
|
{
|
|
8941
8964
|
ref: wrapperRef,
|
|
@@ -8946,7 +8969,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8946
8969
|
sx: { position: "relative" }
|
|
8947
8970
|
},
|
|
8948
8971
|
children,
|
|
8949
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
8972
|
+
(dragging || uploading) && /* @__PURE__ */ React62__default.default.createElement(
|
|
8950
8973
|
material.Box,
|
|
8951
8974
|
{
|
|
8952
8975
|
sx: {
|
|
@@ -8965,7 +8988,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8965
8988
|
zIndex: 10
|
|
8966
8989
|
}
|
|
8967
8990
|
},
|
|
8968
|
-
/* @__PURE__ */
|
|
8991
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
|
|
8969
8992
|
)
|
|
8970
8993
|
);
|
|
8971
8994
|
}
|
|
@@ -9005,7 +9028,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9005
9028
|
var _a;
|
|
9006
9029
|
switch (selectedMainTab) {
|
|
9007
9030
|
case "editor":
|
|
9008
|
-
return /* @__PURE__ */
|
|
9031
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React62__default.default.createElement(EditorBlock, { id: "root" }));
|
|
9009
9032
|
case "preview": {
|
|
9010
9033
|
const rootBlock = document2.root;
|
|
9011
9034
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -9013,18 +9036,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9013
9036
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
9014
9037
|
);
|
|
9015
9038
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
9016
|
-
return /* @__PURE__ */
|
|
9039
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React62__default.default.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
9017
9040
|
}
|
|
9018
9041
|
case "html":
|
|
9019
|
-
return /* @__PURE__ */
|
|
9042
|
+
return /* @__PURE__ */ React62__default.default.createElement(HtmlPanel, null);
|
|
9020
9043
|
case "text":
|
|
9021
|
-
return /* @__PURE__ */
|
|
9044
|
+
return /* @__PURE__ */ React62__default.default.createElement(TextPanel, null);
|
|
9022
9045
|
case "json":
|
|
9023
|
-
return /* @__PURE__ */
|
|
9046
|
+
return /* @__PURE__ */ React62__default.default.createElement(JsonPanel, null);
|
|
9024
9047
|
}
|
|
9025
9048
|
};
|
|
9026
9049
|
const showSaveButtons = persistenceEnabled;
|
|
9027
|
-
return /* @__PURE__ */
|
|
9050
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
9028
9051
|
material.Stack,
|
|
9029
9052
|
{
|
|
9030
9053
|
sx: {
|
|
@@ -9041,10 +9064,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9041
9064
|
justifyContent: "space-between",
|
|
9042
9065
|
alignItems: "center"
|
|
9043
9066
|
},
|
|
9044
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
9045
|
-
/* @__PURE__ */
|
|
9046
|
-
/* @__PURE__ */
|
|
9047
|
-
), selectedMainTab === "editor" && /* @__PURE__ */
|
|
9067
|
+
samplesDrawerEnabled && /* @__PURE__ */ React62__default.default.createElement(ToggleSamplesPanelButton, null),
|
|
9068
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 2, alignItems: "center" }, selectedMainTab === "editor" && /* @__PURE__ */ React62__default.default.createElement(UndoRedoButtons, null), /* @__PURE__ */ React62__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("canvas.desktop-view", "Desktop view") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("canvas.mobile-view", "Mobile view") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))))),
|
|
9069
|
+
/* @__PURE__ */ React62__default.default.createElement(ToggleInspectorPanelButton, null)
|
|
9070
|
+
), selectedMainTab === "editor" && /* @__PURE__ */ React62__default.default.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React62__default.default.createElement(SubjectPreview, null), /* @__PURE__ */ React62__default.default.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
9048
9071
|
material.Box,
|
|
9049
9072
|
{
|
|
9050
9073
|
sx: {
|
|
@@ -9060,8 +9083,8 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9060
9083
|
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
9061
9084
|
}
|
|
9062
9085
|
},
|
|
9063
|
-
/* @__PURE__ */
|
|
9064
|
-
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */
|
|
9086
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
|
|
9087
|
+
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React62__default.default.createElement(SaveBar, { loadTemplates, saveAs })
|
|
9065
9088
|
)));
|
|
9066
9089
|
}
|
|
9067
9090
|
|
|
@@ -9098,7 +9121,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
9098
9121
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
9099
9122
|
});
|
|
9100
9123
|
}
|
|
9101
|
-
var EmailEditorInternal =
|
|
9124
|
+
var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
9102
9125
|
const {
|
|
9103
9126
|
drawerEnterDuration = 225,
|
|
9104
9127
|
drawerExitDuration = 225,
|
|
@@ -9120,10 +9143,10 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9120
9143
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
9121
9144
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
9122
9145
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
9123
|
-
const onChangeRef =
|
|
9146
|
+
const onChangeRef = React62.useRef(onChange);
|
|
9124
9147
|
onChangeRef.current = onChange;
|
|
9125
|
-
const prevDocJsonRef =
|
|
9126
|
-
|
|
9148
|
+
const prevDocJsonRef = React62.useRef("");
|
|
9149
|
+
React62.useEffect(() => {
|
|
9127
9150
|
var _a;
|
|
9128
9151
|
const docJson = JSON.stringify(currentDocument);
|
|
9129
9152
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -9131,7 +9154,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9131
9154
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
9132
9155
|
}
|
|
9133
9156
|
}, [currentDocument]);
|
|
9134
|
-
|
|
9157
|
+
React62.useImperativeHandle(ref, () => ({
|
|
9135
9158
|
saveTemplate: () => {
|
|
9136
9159
|
return saveTemplate();
|
|
9137
9160
|
},
|
|
@@ -9143,7 +9166,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9143
9166
|
return getDocument();
|
|
9144
9167
|
}
|
|
9145
9168
|
}));
|
|
9146
|
-
return /* @__PURE__ */
|
|
9169
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
9147
9170
|
InspectorDrawer,
|
|
9148
9171
|
{
|
|
9149
9172
|
enterDuration: drawerEnterDuration,
|
|
@@ -9152,7 +9175,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9152
9175
|
copyTemplate,
|
|
9153
9176
|
renameTemplate
|
|
9154
9177
|
}
|
|
9155
|
-
), /* @__PURE__ */
|
|
9178
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
9156
9179
|
SamplesDrawer,
|
|
9157
9180
|
{
|
|
9158
9181
|
enterDuration: drawerEnterDuration,
|
|
@@ -9168,7 +9191,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9168
9191
|
setTemplateKind,
|
|
9169
9192
|
saveAs
|
|
9170
9193
|
}
|
|
9171
|
-
), /* @__PURE__ */
|
|
9194
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
9172
9195
|
material.Stack,
|
|
9173
9196
|
{
|
|
9174
9197
|
sx: {
|
|
@@ -9177,10 +9200,10 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9177
9200
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
9178
9201
|
}
|
|
9179
9202
|
},
|
|
9180
|
-
/* @__PURE__ */
|
|
9203
|
+
/* @__PURE__ */ React62__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
9181
9204
|
));
|
|
9182
9205
|
});
|
|
9183
|
-
var EmailEditor =
|
|
9206
|
+
var EmailEditor = React62.forwardRef((props, ref) => {
|
|
9184
9207
|
const {
|
|
9185
9208
|
initialTemplate: initialTemplateProp,
|
|
9186
9209
|
initialTemplateId,
|
|
@@ -9207,23 +9230,23 @@ var EmailEditor = React57.forwardRef((props, ref) => {
|
|
|
9207
9230
|
locale
|
|
9208
9231
|
} = props;
|
|
9209
9232
|
activateLocale(locale);
|
|
9210
|
-
const resolvedTemplate =
|
|
9233
|
+
const resolvedTemplate = React62.useMemo(
|
|
9211
9234
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
9212
9235
|
[initialTemplateProp]
|
|
9213
9236
|
);
|
|
9214
|
-
const prevTemplateRef =
|
|
9237
|
+
const prevTemplateRef = React62.useRef(void 0);
|
|
9215
9238
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
9216
9239
|
prevTemplateRef.current = resolvedTemplate;
|
|
9217
9240
|
resetDocument(resolvedTemplate);
|
|
9218
9241
|
}
|
|
9219
|
-
|
|
9242
|
+
React62.useEffect(() => {
|
|
9220
9243
|
setPersistenceEnabled(persistenceEnabled);
|
|
9221
9244
|
}, [persistenceEnabled]);
|
|
9222
|
-
const imageCallbacks =
|
|
9245
|
+
const imageCallbacks = React62.useMemo(
|
|
9223
9246
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
9224
9247
|
[uploadImage, loadImages, deleteImage]
|
|
9225
9248
|
);
|
|
9226
|
-
return /* @__PURE__ */
|
|
9249
|
+
return /* @__PURE__ */ React62__default.default.createElement(react.I18nProvider, { i18n: core.i18n }, /* @__PURE__ */ React62__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React62__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React62__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React62__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React62__default.default.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React62__default.default.createElement(
|
|
9227
9250
|
EmailEditorProvider,
|
|
9228
9251
|
{
|
|
9229
9252
|
initialTemplate: resolvedTemplate,
|
|
@@ -9232,7 +9255,7 @@ var EmailEditor = React57.forwardRef((props, ref) => {
|
|
|
9232
9255
|
onSave,
|
|
9233
9256
|
onChange
|
|
9234
9257
|
},
|
|
9235
|
-
/* @__PURE__ */
|
|
9258
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
9236
9259
|
EmailEditorInternal,
|
|
9237
9260
|
{
|
|
9238
9261
|
ref,
|