@kontakto/email-template-editor 2.7.0 → 2.9.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 +771 -745
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +565 -539
- 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"],"variables.add":["Add variable"],"variables.click-to-declare":["Click a token to declare it."],"variables.confirm-delete":["Variable is still referenced in the body. Delete anyway?"],"variables.copy-token":["Copy {",["name"],"} token"],"variables.description":["Description"],"variables.focus-first":["Focus a text field first"],"variables.insert-at-cursor":["Insert at cursor"],"variables.intro":["Declared variables travel with the template. Reference them in subject and body as {",["name"],"}. In Preview mode, tokens render with the sample values below."],"variables.none":["No variables declared. Click + to add one."],"variables.open-template":["Open a template to manage variables."],"variables.optional":["Optional"],"variables.ref-many":["refs"],"variables.ref-one":["ref"],"variables.remove":["Remove"],"variables.sample-hint":["Shown in Preview mode"],"variables.sample-value":["Sample value"],"variables.title":["Variables"],"variables.undeclared":["Undeclared in body"],"variables.unused":["Unused in body"]}');
|
|
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"],"variables.add":["Lis\xE4\xE4 muuttuja"],"variables.click-to-declare":["M\xE4\xE4rittele muuttuja napsauttamalla tunnistetta."],"variables.confirm-delete":["Muuttujaan viitataan edelleen viestiss\xE4. Poistetaanko silti?"],"variables.copy-token":["Kopioi {",["nimi"],"}-tunniste"],"variables.description":["Kuvaus"],"variables.focus-first":["Kohdista ensin tekstikentt\xE4\xE4n"],"variables.insert-at-cursor":["Lis\xE4\xE4 kohdistimeen"],"variables.intro":["M\xE4\xE4ritellyt muuttujat kulkevat pohjan mukana. Viittaa niihin aiherivill\xE4 ja viestiss\xE4 muodossa {",["nimi"],"}. Esikatselussa merkit korvautuvat alla olevilla esimerkkiarvoilla."],"variables.none":["Ei m\xE4\xE4riteltyj\xE4 muuttujia. Lis\xE4\xE4 napsauttamalla +."],"variables.open-template":["Avaa pohja hallitaksesi muuttujia."],"variables.optional":["Valinnainen"],"variables.ref-many":["viittausta"],"variables.ref-one":["viittaus"],"variables.remove":["Poista"],"variables.sample-hint":["N\xE4ytet\xE4\xE4n esikatselussa"],"variables.sample-value":["Esimerkkiarvo"],"variables.title":["Muuttujat"],"variables.undeclared":["M\xE4\xE4rittelem\xE4t\xF6n viestiss\xE4"],"variables.unused":["Ei k\xE4yt\xF6ss\xE4 viestiss\xE4"]}');
|
|
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"],"variables.add":["L\xE4gg till variabel"],"variables.click-to-declare":["Klicka p\xE5 en token f\xF6r att deklarera den."],"variables.confirm-delete":["Variabeln refereras fortfarande i br\xF6dtexten. Ta bort \xE4nd\xE5?"],"variables.copy-token":["Kopiera {",["namn"],"}-token"],"variables.description":["Beskrivning"],"variables.focus-first":["Fokusera ett textf\xE4lt f\xF6rst"],"variables.insert-at-cursor":["Infoga vid mark\xF6ren"],"variables.intro":["Deklarerade variabler f\xF6ljer med mallen. H\xE4nvisa till dem i \xE4mnesrad och br\xF6dtext som {",["namn"],"}. I f\xF6rhandsgranskningen renderas tokens med exempelv\xE4rdena nedan."],"variables.none":["Inga variabler deklarerade. Klicka p\xE5 + f\xF6r att l\xE4gga till en."],"variables.open-template":["\xD6ppna en mall f\xF6r att hantera variabler."],"variables.optional":["Valfritt"],"variables.ref-many":["referenser"],"variables.ref-one":["referens"],"variables.remove":["Ta bort"],"variables.sample-hint":["Visas i f\xF6rhandsgranskning"],"variables.sample-value":["Exempelv\xE4rde"],"variables.title":["Variabler"],"variables.undeclared":["Odeklarerad i br\xF6dtexten"],"variables.unused":["Oanv\xE4nd i br\xF6dtexten"]}');
|
|
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" }, t("variables.open-template", "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
|
);
|
|
@@ -4490,7 +4491,7 @@ function VariablesPanel() {
|
|
|
4490
4491
|
const usageCount = v.name ? (_a2 = usage.get(v.name)) != null ? _a2 : 0 : 0;
|
|
4491
4492
|
if (usageCount > 0) {
|
|
4492
4493
|
const ok = window.confirm(
|
|
4493
|
-
|
|
4494
|
+
t("variables.confirm-delete", "Variable is still referenced in the body. Delete anyway?") + ` (${v.name}, ${usageCount})`
|
|
4494
4495
|
);
|
|
4495
4496
|
if (!ok) return;
|
|
4496
4497
|
}
|
|
@@ -4542,7 +4543,10 @@ 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 } }, t("variables.title", "Variables")), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("variables.add", "Add variable") }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": t("variables.add", "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 } }, t(
|
|
4547
|
+
"variables.intro",
|
|
4548
|
+
"Declared variables travel with the template. Reference them in subject and body as {{name}}. In Preview mode, tokens render with the sample values below."
|
|
4549
|
+
)), 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 } }, t("variables.undeclared", "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
4550
|
material.Chip,
|
|
4547
4551
|
{
|
|
4548
4552
|
key: name,
|
|
@@ -4550,12 +4554,12 @@ function VariablesPanel() {
|
|
|
4550
4554
|
label: name,
|
|
4551
4555
|
onClick: () => addFromToken(name),
|
|
4552
4556
|
onDelete: () => addFromToken(name),
|
|
4553
|
-
deleteIcon: /* @__PURE__ */
|
|
4557
|
+
deleteIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
4554
4558
|
sx: { fontFamily: "monospace" }
|
|
4555
4559
|
}
|
|
4556
|
-
))), /* @__PURE__ */
|
|
4560
|
+
))), /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, t("variables.click-to-declare", "Click a token to declare it."))), variables.length === 0 ? /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, t("variables.none", "No variables declared. Click + to add one.")) : /* @__PURE__ */ React62__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
|
|
4557
4561
|
var _a2;
|
|
4558
|
-
return /* @__PURE__ */
|
|
4562
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4559
4563
|
VariableRow,
|
|
4560
4564
|
{
|
|
4561
4565
|
key: i,
|
|
@@ -4588,9 +4592,9 @@ function VariableRow({
|
|
|
4588
4592
|
onCopy
|
|
4589
4593
|
}) {
|
|
4590
4594
|
var _a, _b;
|
|
4591
|
-
const [draftName, setDraftName] =
|
|
4592
|
-
const [isEditing, setIsEditing] =
|
|
4593
|
-
|
|
4595
|
+
const [draftName, setDraftName] = React62.useState(variable.name);
|
|
4596
|
+
const [isEditing, setIsEditing] = React62.useState(false);
|
|
4597
|
+
React62.useEffect(() => {
|
|
4594
4598
|
if (!isEditing) setDraftName(variable.name);
|
|
4595
4599
|
}, [variable.name, isEditing]);
|
|
4596
4600
|
const nameError = validateVariableName(draftName, siblings, index);
|
|
@@ -4606,10 +4610,10 @@ function VariableRow({
|
|
|
4606
4610
|
onCommitRename(draftName.trim());
|
|
4607
4611
|
}
|
|
4608
4612
|
};
|
|
4609
|
-
return /* @__PURE__ */
|
|
4613
|
+
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
4614
|
material.TextField,
|
|
4611
4615
|
{
|
|
4612
|
-
label: "Name",
|
|
4616
|
+
label: t("rename.name-label", "Name"),
|
|
4613
4617
|
size: "small",
|
|
4614
4618
|
fullWidth: true,
|
|
4615
4619
|
value: draftName,
|
|
@@ -4631,53 +4635,53 @@ function VariableRow({
|
|
|
4631
4635
|
error: Boolean(nameError),
|
|
4632
4636
|
helperText: nameError != null ? nameError : " "
|
|
4633
4637
|
}
|
|
4634
|
-
), /* @__PURE__ */
|
|
4638
|
+
), /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("variables.copy-token", "Copy {{name}} token") }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
4635
4639
|
material.IconButton,
|
|
4636
4640
|
{
|
|
4637
4641
|
size: "small",
|
|
4638
4642
|
onClick: onCopy,
|
|
4639
4643
|
disabled: !hasName,
|
|
4640
|
-
"aria-label":
|
|
4644
|
+
"aria-label": t("variables.copy-token", "Copy {{name}} token")
|
|
4641
4645
|
},
|
|
4642
|
-
/* @__PURE__ */
|
|
4643
|
-
))), /* @__PURE__ */
|
|
4646
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
|
|
4647
|
+
))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: canInsert ? t("variables.insert-at-cursor", "Insert at cursor") : t("variables.focus-first", "Focus a text field first") }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
4644
4648
|
material.IconButton,
|
|
4645
4649
|
{
|
|
4646
4650
|
size: "small",
|
|
4647
4651
|
onClick: onInsert,
|
|
4648
4652
|
disabled: !hasName || !canInsert,
|
|
4649
|
-
"aria-label":
|
|
4653
|
+
"aria-label": t("variables.insert-at-cursor", "Insert at cursor")
|
|
4650
4654
|
},
|
|
4651
|
-
/* @__PURE__ */
|
|
4652
|
-
))), /* @__PURE__ */
|
|
4655
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.InputOutlined, { fontSize: "small" })
|
|
4656
|
+
))), /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("variables.remove", "Remove") }, /* @__PURE__ */ React62__default.default.createElement(
|
|
4653
4657
|
material.IconButton,
|
|
4654
4658
|
{
|
|
4655
4659
|
size: "small",
|
|
4656
4660
|
onClick: onRemove,
|
|
4657
|
-
"aria-label":
|
|
4661
|
+
"aria-label": t("variables.remove", "Remove")
|
|
4658
4662
|
},
|
|
4659
|
-
/* @__PURE__ */
|
|
4660
|
-
)))), /* @__PURE__ */
|
|
4663
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
4664
|
+
)))), /* @__PURE__ */ React62__default.default.createElement(
|
|
4661
4665
|
material.TextField,
|
|
4662
4666
|
{
|
|
4663
|
-
label: "Description",
|
|
4667
|
+
label: t("variables.description", "Description"),
|
|
4664
4668
|
size: "small",
|
|
4665
4669
|
fullWidth: true,
|
|
4666
4670
|
value: (_a = variable.description) != null ? _a : "",
|
|
4667
4671
|
onChange: (e) => onChangeDescription(e.target.value),
|
|
4668
|
-
placeholder: "Optional"
|
|
4672
|
+
placeholder: t("variables.optional", "Optional")
|
|
4669
4673
|
}
|
|
4670
|
-
), /* @__PURE__ */
|
|
4674
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
4671
4675
|
material.TextField,
|
|
4672
4676
|
{
|
|
4673
|
-
label: "Sample value",
|
|
4677
|
+
label: t("variables.sample-value", "Sample value"),
|
|
4674
4678
|
size: "small",
|
|
4675
4679
|
fullWidth: true,
|
|
4676
4680
|
value: (_b = variable.sampleValue) != null ? _b : "",
|
|
4677
4681
|
onChange: (e) => onChangeSampleValue(e.target.value),
|
|
4678
|
-
placeholder: "Shown in Preview mode",
|
|
4682
|
+
placeholder: t("variables.sample-hint", "Shown in Preview mode"),
|
|
4679
4683
|
InputProps: {
|
|
4680
|
-
startAdornment: /* @__PURE__ */
|
|
4684
|
+
startAdornment: /* @__PURE__ */ React62__default.default.createElement(
|
|
4681
4685
|
iconsMaterial.DataObjectOutlined,
|
|
4682
4686
|
{
|
|
4683
4687
|
fontSize: "small",
|
|
@@ -4686,12 +4690,12 @@ function VariableRow({
|
|
|
4686
4690
|
)
|
|
4687
4691
|
}
|
|
4688
4692
|
}
|
|
4689
|
-
), /* @__PURE__ */
|
|
4693
|
+
), /* @__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: t("variables.unused", "Unused in body") }) : /* @__PURE__ */ React62__default.default.createElement(
|
|
4690
4694
|
material.Chip,
|
|
4691
4695
|
{
|
|
4692
4696
|
size: "small",
|
|
4693
4697
|
variant: "outlined",
|
|
4694
|
-
label: `${usageCount}
|
|
4698
|
+
label: `${usageCount} ${usageCount === 1 ? t("variables.ref-one", "ref") : t("variables.ref-many", "refs")}`
|
|
4695
4699
|
}
|
|
4696
4700
|
))));
|
|
4697
4701
|
}
|
|
@@ -4711,13 +4715,13 @@ function InspectorDrawer({
|
|
|
4711
4715
|
const renderCurrentSidebarPanel = () => {
|
|
4712
4716
|
switch (selectedSidebarTab) {
|
|
4713
4717
|
case "block-configuration":
|
|
4714
|
-
return /* @__PURE__ */
|
|
4718
|
+
return /* @__PURE__ */ React62__default.default.createElement(ConfigurationPanel, null);
|
|
4715
4719
|
case "styles":
|
|
4716
|
-
return /* @__PURE__ */
|
|
4720
|
+
return /* @__PURE__ */ React62__default.default.createElement(StylesPanel, null);
|
|
4717
4721
|
case "variables":
|
|
4718
|
-
return /* @__PURE__ */
|
|
4722
|
+
return /* @__PURE__ */ React62__default.default.createElement(VariablesPanel, null);
|
|
4719
4723
|
case "template-settings":
|
|
4720
|
-
return /* @__PURE__ */
|
|
4724
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4721
4725
|
TemplatePanel,
|
|
4722
4726
|
{
|
|
4723
4727
|
deleteTemplate,
|
|
@@ -4727,7 +4731,7 @@ function InspectorDrawer({
|
|
|
4727
4731
|
);
|
|
4728
4732
|
}
|
|
4729
4733
|
};
|
|
4730
|
-
return /* @__PURE__ */
|
|
4734
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4731
4735
|
material.Drawer,
|
|
4732
4736
|
{
|
|
4733
4737
|
variant: "persistent",
|
|
@@ -4749,7 +4753,7 @@ function InspectorDrawer({
|
|
|
4749
4753
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
4750
4754
|
}
|
|
4751
4755
|
},
|
|
4752
|
-
/* @__PURE__ */
|
|
4756
|
+
/* @__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
4757
|
material.Tabs,
|
|
4754
4758
|
{
|
|
4755
4759
|
value: selectedSidebarTab,
|
|
@@ -4757,25 +4761,25 @@ function InspectorDrawer({
|
|
|
4757
4761
|
variant: "fullWidth",
|
|
4758
4762
|
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
4759
4763
|
},
|
|
4760
|
-
/* @__PURE__ */
|
|
4761
|
-
/* @__PURE__ */
|
|
4762
|
-
/* @__PURE__ */
|
|
4763
|
-
/* @__PURE__ */
|
|
4764
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "styles", label: t("inspector.tab.styles", "Styles") }),
|
|
4765
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "block-configuration", label: t("inspector.tab.inspect", "Inspect") }),
|
|
4766
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "variables", label: t("inspector.tab.variables", "Variables") }),
|
|
4767
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "template-settings", label: t("inspector.tab.settings", "Settings") })
|
|
4764
4768
|
))),
|
|
4765
|
-
/* @__PURE__ */
|
|
4769
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
4766
4770
|
);
|
|
4767
4771
|
}
|
|
4768
|
-
var SnackbarContext =
|
|
4772
|
+
var SnackbarContext = React62.createContext(null);
|
|
4769
4773
|
function useSnackbar() {
|
|
4770
|
-
const context =
|
|
4774
|
+
const context = React62.useContext(SnackbarContext);
|
|
4771
4775
|
if (!context) {
|
|
4772
4776
|
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
4773
4777
|
}
|
|
4774
4778
|
return context;
|
|
4775
4779
|
}
|
|
4776
4780
|
function SnackbarProvider({ children }) {
|
|
4777
|
-
const [message, setMessage] =
|
|
4778
|
-
const [duration, setDuration] =
|
|
4781
|
+
const [message, setMessage] = React62.useState(null);
|
|
4782
|
+
const [duration, setDuration] = React62.useState(3e3);
|
|
4779
4783
|
const showMessage = (text, customDuration = 3e3) => {
|
|
4780
4784
|
setMessage(text);
|
|
4781
4785
|
setDuration(customDuration);
|
|
@@ -4783,7 +4787,7 @@ function SnackbarProvider({ children }) {
|
|
|
4783
4787
|
const handleClose = () => {
|
|
4784
4788
|
setMessage(null);
|
|
4785
4789
|
};
|
|
4786
|
-
return /* @__PURE__ */
|
|
4790
|
+
return /* @__PURE__ */ React62__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React62__default.default.createElement(
|
|
4787
4791
|
material.Snackbar,
|
|
4788
4792
|
{
|
|
4789
4793
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4830,8 +4834,8 @@ function TemplateRow({
|
|
|
4830
4834
|
onDuplicateAsTemplate
|
|
4831
4835
|
}) {
|
|
4832
4836
|
const { setCurrentTemplate } = useEmailEditor();
|
|
4833
|
-
const [hover, setHover] =
|
|
4834
|
-
const [menuAnchor, setMenuAnchor] =
|
|
4837
|
+
const [hover, setHover] = React62.useState(false);
|
|
4838
|
+
const [menuAnchor, setMenuAnchor] = React62.useState(null);
|
|
4835
4839
|
const closeMenu = () => setMenuAnchor(null);
|
|
4836
4840
|
const openMenu = (e) => {
|
|
4837
4841
|
e.stopPropagation();
|
|
@@ -4860,7 +4864,7 @@ function TemplateRow({
|
|
|
4860
4864
|
const hasActions = Boolean(
|
|
4861
4865
|
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
4862
4866
|
);
|
|
4863
|
-
return /* @__PURE__ */
|
|
4867
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
4864
4868
|
material.Box,
|
|
4865
4869
|
{
|
|
4866
4870
|
role: "button",
|
|
@@ -4886,7 +4890,7 @@ function TemplateRow({
|
|
|
4886
4890
|
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
4887
4891
|
}
|
|
4888
4892
|
},
|
|
4889
|
-
/* @__PURE__ */
|
|
4893
|
+
/* @__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
4894
|
material.Typography,
|
|
4891
4895
|
{
|
|
4892
4896
|
variant: "body2",
|
|
@@ -4900,14 +4904,14 @@ function TemplateRow({
|
|
|
4900
4904
|
title: template.slug
|
|
4901
4905
|
},
|
|
4902
4906
|
template.slug
|
|
4903
|
-
), updated && !hasActions && /* @__PURE__ */
|
|
4907
|
+
), updated && !hasActions && /* @__PURE__ */ React62__default.default.createElement(
|
|
4904
4908
|
material.Typography,
|
|
4905
4909
|
{
|
|
4906
4910
|
variant: "caption",
|
|
4907
4911
|
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
4908
4912
|
},
|
|
4909
4913
|
updated
|
|
4910
|
-
)), template.description && /* @__PURE__ */
|
|
4914
|
+
)), template.description && /* @__PURE__ */ React62__default.default.createElement(
|
|
4911
4915
|
material.Typography,
|
|
4912
4916
|
{
|
|
4913
4917
|
variant: "caption",
|
|
@@ -4921,7 +4925,7 @@ function TemplateRow({
|
|
|
4921
4925
|
}
|
|
4922
4926
|
},
|
|
4923
4927
|
template.description
|
|
4924
|
-
), template.tags && template.tags.length > 0 && /* @__PURE__ */
|
|
4928
|
+
), 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
4929
|
material.Chip,
|
|
4926
4930
|
{
|
|
4927
4931
|
key: tag,
|
|
@@ -4930,7 +4934,7 @@ function TemplateRow({
|
|
|
4930
4934
|
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
4931
4935
|
}
|
|
4932
4936
|
))))),
|
|
4933
|
-
hasActions && /* @__PURE__ */
|
|
4937
|
+
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
4938
|
material.IconButton,
|
|
4935
4939
|
{
|
|
4936
4940
|
size: "small",
|
|
@@ -4946,8 +4950,8 @@ function TemplateRow({
|
|
|
4946
4950
|
transition: "opacity 120ms"
|
|
4947
4951
|
}
|
|
4948
4952
|
},
|
|
4949
|
-
/* @__PURE__ */
|
|
4950
|
-
)), /* @__PURE__ */
|
|
4953
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.MoreVertOutlined, { fontSize: "small" })
|
|
4954
|
+
)), /* @__PURE__ */ React62__default.default.createElement(
|
|
4951
4955
|
material.Menu,
|
|
4952
4956
|
{
|
|
4953
4957
|
anchorEl: menuAnchor,
|
|
@@ -4958,14 +4962,14 @@ function TemplateRow({
|
|
|
4958
4962
|
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
4959
4963
|
slotProps: { paper: { sx: { minWidth: 200 } } }
|
|
4960
4964
|
},
|
|
4961
|
-
onRename && /* @__PURE__ */
|
|
4962
|
-
onDuplicate && /* @__PURE__ */
|
|
4963
|
-
onDuplicateAsTemplate && /* @__PURE__ */
|
|
4964
|
-
onPromote && /* @__PURE__ */
|
|
4965
|
-
onDemote && /* @__PURE__ */
|
|
4965
|
+
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"))),
|
|
4966
|
+
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"))),
|
|
4967
|
+
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"))),
|
|
4968
|
+
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"))),
|
|
4969
|
+
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
4970
|
onDelete && [
|
|
4967
|
-
/* @__PURE__ */
|
|
4968
|
-
/* @__PURE__ */
|
|
4971
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Divider, { key: "divider" }),
|
|
4972
|
+
/* @__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
4973
|
]
|
|
4970
4974
|
))
|
|
4971
4975
|
);
|
|
@@ -5080,31 +5084,31 @@ var PREVIEW_MAX = 36;
|
|
|
5080
5084
|
function iconForType(type) {
|
|
5081
5085
|
switch (type) {
|
|
5082
5086
|
case "EmailLayout":
|
|
5083
|
-
return /* @__PURE__ */
|
|
5087
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.DashboardOutlined, { fontSize: "small" });
|
|
5084
5088
|
case "Heading":
|
|
5085
|
-
return /* @__PURE__ */
|
|
5089
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HMobiledataOutlined, { fontSize: "small" });
|
|
5086
5090
|
case "Text":
|
|
5087
|
-
return /* @__PURE__ */
|
|
5091
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.NotesOutlined, { fontSize: "small" });
|
|
5088
5092
|
case "Button":
|
|
5089
|
-
return /* @__PURE__ */
|
|
5093
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SmartButtonOutlined, { fontSize: "small" });
|
|
5090
5094
|
case "Image":
|
|
5091
|
-
return /* @__PURE__ */
|
|
5095
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ImageOutlined, { fontSize: "small" });
|
|
5092
5096
|
case "Avatar":
|
|
5093
|
-
return /* @__PURE__ */
|
|
5097
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AccountCircleOutlined, { fontSize: "small" });
|
|
5094
5098
|
case "Signature":
|
|
5095
|
-
return /* @__PURE__ */
|
|
5099
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContactMailOutlined, { fontSize: "small" });
|
|
5096
5100
|
case "Divider":
|
|
5097
|
-
return /* @__PURE__ */
|
|
5101
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, { fontSize: "small" });
|
|
5098
5102
|
case "Spacer":
|
|
5099
|
-
return /* @__PURE__ */
|
|
5103
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.Crop32Outlined, { fontSize: "small" });
|
|
5100
5104
|
case "Html":
|
|
5101
|
-
return /* @__PURE__ */
|
|
5105
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HtmlOutlined, { fontSize: "small" });
|
|
5102
5106
|
case "Container":
|
|
5103
|
-
return /* @__PURE__ */
|
|
5107
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" });
|
|
5104
5108
|
case "ColumnsContainer":
|
|
5105
|
-
return /* @__PURE__ */
|
|
5109
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ViewColumnOutlined, { fontSize: "small" });
|
|
5106
5110
|
default:
|
|
5107
|
-
return /* @__PURE__ */
|
|
5111
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.BusinessOutlined, { fontSize: "small" });
|
|
5108
5112
|
}
|
|
5109
5113
|
}
|
|
5110
5114
|
function previewText(text) {
|
|
@@ -5134,7 +5138,7 @@ function buildNode(id, doc, ctx) {
|
|
|
5134
5138
|
).filter((n) => n !== null);
|
|
5135
5139
|
return {
|
|
5136
5140
|
id,
|
|
5137
|
-
label: "Canvas",
|
|
5141
|
+
label: t("outline.canvas", "Canvas"),
|
|
5138
5142
|
icon: iconForType("EmailLayout"),
|
|
5139
5143
|
children,
|
|
5140
5144
|
containerChildrenRef: parentForChildren
|
|
@@ -5182,7 +5186,7 @@ function buildNode(id, doc, ctx) {
|
|
|
5182
5186
|
id: `${id}::col${colIdx}`,
|
|
5183
5187
|
label: `Column ${colIdx + 1}`,
|
|
5184
5188
|
preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
|
|
5185
|
-
icon: /* @__PURE__ */
|
|
5189
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
|
|
5186
5190
|
children: colChildren,
|
|
5187
5191
|
containerChildrenRef: parentForCol
|
|
5188
5192
|
});
|
|
@@ -5229,7 +5233,7 @@ var DRAG_MIME = "application/x-email-editor-block";
|
|
|
5229
5233
|
function OutlinePanel() {
|
|
5230
5234
|
const document2 = useDocument();
|
|
5231
5235
|
const selectedBlockId = useSelectedBlockId();
|
|
5232
|
-
const [dragging, setDragging] =
|
|
5236
|
+
const [dragging, setDragging] = React62.useState(null);
|
|
5233
5237
|
const tree = buildNode(ROOT_BLOCK_ID2, document2);
|
|
5234
5238
|
const performMove = (payload, targetParent, targetIndex) => {
|
|
5235
5239
|
const patch = buildMovePatch(
|
|
@@ -5244,7 +5248,7 @@ function OutlinePanel() {
|
|
|
5244
5248
|
setSelectedBlockId(payload.sourceId);
|
|
5245
5249
|
}
|
|
5246
5250
|
};
|
|
5247
|
-
return /* @__PURE__ */
|
|
5251
|
+
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
5252
|
OutlineRow,
|
|
5249
5253
|
{
|
|
5250
5254
|
node: tree,
|
|
@@ -5255,7 +5259,7 @@ function OutlinePanel() {
|
|
|
5255
5259
|
setDragging,
|
|
5256
5260
|
performMove
|
|
5257
5261
|
}
|
|
5258
|
-
) : /* @__PURE__ */
|
|
5262
|
+
) : /* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
|
|
5259
5263
|
}
|
|
5260
5264
|
function OutlineRow({
|
|
5261
5265
|
node,
|
|
@@ -5266,8 +5270,8 @@ function OutlineRow({
|
|
|
5266
5270
|
setDragging,
|
|
5267
5271
|
performMove
|
|
5268
5272
|
}) {
|
|
5269
|
-
const [expanded, setExpanded] =
|
|
5270
|
-
const [dropPos, setDropPos] =
|
|
5273
|
+
const [expanded, setExpanded] = React62.useState(true);
|
|
5274
|
+
const [dropPos, setDropPos] = React62.useState(null);
|
|
5271
5275
|
const hasChildren = Boolean(node.children && node.children.length > 0);
|
|
5272
5276
|
const isSelectable = !node.id.includes("::");
|
|
5273
5277
|
const isSelected = isSelectable && selectedBlockId === node.id;
|
|
@@ -5341,7 +5345,7 @@ function OutlineRow({
|
|
|
5341
5345
|
const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
|
|
5342
5346
|
if (patch) setDocument(patch);
|
|
5343
5347
|
};
|
|
5344
|
-
return /* @__PURE__ */
|
|
5348
|
+
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
5349
|
material.Stack,
|
|
5346
5350
|
{
|
|
5347
5351
|
direction: "row",
|
|
@@ -5374,7 +5378,7 @@ function OutlineRow({
|
|
|
5374
5378
|
userSelect: "none"
|
|
5375
5379
|
}
|
|
5376
5380
|
},
|
|
5377
|
-
hasChildren ? /* @__PURE__ */
|
|
5381
|
+
hasChildren ? /* @__PURE__ */ React62__default.default.createElement(
|
|
5378
5382
|
material.Box,
|
|
5379
5383
|
{
|
|
5380
5384
|
role: "button",
|
|
@@ -5385,9 +5389,9 @@ function OutlineRow({
|
|
|
5385
5389
|
},
|
|
5386
5390
|
sx: { display: "flex", alignItems: "center", cursor: "pointer" }
|
|
5387
5391
|
},
|
|
5388
|
-
expanded ? /* @__PURE__ */
|
|
5389
|
-
) : /* @__PURE__ */
|
|
5390
|
-
/* @__PURE__ */
|
|
5392
|
+
expanded ? /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ChevronRight, { fontSize: "small" })
|
|
5393
|
+
) : /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { width: 20 } }),
|
|
5394
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5391
5395
|
material.Box,
|
|
5392
5396
|
{
|
|
5393
5397
|
sx: {
|
|
@@ -5399,7 +5403,7 @@ function OutlineRow({
|
|
|
5399
5403
|
},
|
|
5400
5404
|
node.icon
|
|
5401
5405
|
),
|
|
5402
|
-
/* @__PURE__ */
|
|
5406
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5403
5407
|
material.Typography,
|
|
5404
5408
|
{
|
|
5405
5409
|
variant: "body2",
|
|
@@ -5411,7 +5415,7 @@ function OutlineRow({
|
|
|
5411
5415
|
},
|
|
5412
5416
|
node.label
|
|
5413
5417
|
),
|
|
5414
|
-
node.preview && /* @__PURE__ */
|
|
5418
|
+
node.preview && /* @__PURE__ */ React62__default.default.createElement(
|
|
5415
5419
|
material.Typography,
|
|
5416
5420
|
{
|
|
5417
5421
|
variant: "body2",
|
|
@@ -5427,7 +5431,7 @@ function OutlineRow({
|
|
|
5427
5431
|
"\u2014 ",
|
|
5428
5432
|
node.preview
|
|
5429
5433
|
),
|
|
5430
|
-
canMove && /* @__PURE__ */
|
|
5434
|
+
canMove && /* @__PURE__ */ React62__default.default.createElement(
|
|
5431
5435
|
material.Box,
|
|
5432
5436
|
{
|
|
5433
5437
|
className: "outline-move-btns",
|
|
@@ -5438,7 +5442,7 @@ function OutlineRow({
|
|
|
5438
5442
|
transition: "opacity 120ms"
|
|
5439
5443
|
}
|
|
5440
5444
|
},
|
|
5441
|
-
/* @__PURE__ */
|
|
5445
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Move up" }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
5442
5446
|
material.IconButton,
|
|
5443
5447
|
{
|
|
5444
5448
|
size: "small",
|
|
@@ -5450,9 +5454,9 @@ function OutlineRow({
|
|
|
5450
5454
|
"aria-label": `Move ${node.label} up`,
|
|
5451
5455
|
sx: { p: 0.25 }
|
|
5452
5456
|
},
|
|
5453
|
-
/* @__PURE__ */
|
|
5457
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.KeyboardArrowUp, { fontSize: "small" })
|
|
5454
5458
|
))),
|
|
5455
|
-
/* @__PURE__ */
|
|
5459
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: "Move down" }, /* @__PURE__ */ React62__default.default.createElement("span", null, /* @__PURE__ */ React62__default.default.createElement(
|
|
5456
5460
|
material.IconButton,
|
|
5457
5461
|
{
|
|
5458
5462
|
size: "small",
|
|
@@ -5464,10 +5468,10 @@ function OutlineRow({
|
|
|
5464
5468
|
"aria-label": `Move ${node.label} down`,
|
|
5465
5469
|
sx: { p: 0.25 }
|
|
5466
5470
|
},
|
|
5467
|
-
/* @__PURE__ */
|
|
5471
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.KeyboardArrowDown, { fontSize: "small" })
|
|
5468
5472
|
)))
|
|
5469
5473
|
)
|
|
5470
|
-
), dropPos === "after" && /* @__PURE__ */
|
|
5474
|
+
), 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
5475
|
OutlineRow,
|
|
5472
5476
|
{
|
|
5473
5477
|
key: child.id,
|
|
@@ -5482,7 +5486,7 @@ function OutlineRow({
|
|
|
5482
5486
|
))));
|
|
5483
5487
|
}
|
|
5484
5488
|
function DropLine({ depth }) {
|
|
5485
|
-
return /* @__PURE__ */
|
|
5489
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
5486
5490
|
material.Box,
|
|
5487
5491
|
{
|
|
5488
5492
|
sx: {
|
|
@@ -5490,7 +5494,7 @@ function DropLine({ depth }) {
|
|
|
5490
5494
|
height: 0
|
|
5491
5495
|
}
|
|
5492
5496
|
},
|
|
5493
|
-
/* @__PURE__ */
|
|
5497
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5494
5498
|
material.Box,
|
|
5495
5499
|
{
|
|
5496
5500
|
sx: {
|
|
@@ -5516,11 +5520,11 @@ function NewTemplatePickerDialog({
|
|
|
5516
5520
|
onClose,
|
|
5517
5521
|
onCreate
|
|
5518
5522
|
}) {
|
|
5519
|
-
const [name, setName] =
|
|
5520
|
-
const [selectedStarter, setSelectedStarter] =
|
|
5521
|
-
const [error, setError] =
|
|
5522
|
-
const [busy, setBusy] =
|
|
5523
|
-
|
|
5523
|
+
const [name, setName] = React62.useState("");
|
|
5524
|
+
const [selectedStarter, setSelectedStarter] = React62.useState(null);
|
|
5525
|
+
const [error, setError] = React62.useState(null);
|
|
5526
|
+
const [busy, setBusy] = React62.useState(false);
|
|
5527
|
+
React62.useEffect(() => {
|
|
5524
5528
|
if (open) {
|
|
5525
5529
|
setName(defaultName != null ? defaultName : t(kind === "sample" ? "drawer.new-sample" : "drawer.new-template", kind === "sample" ? "New sample" : "New template"));
|
|
5526
5530
|
setSelectedStarter(null);
|
|
@@ -5551,7 +5555,7 @@ function NewTemplatePickerDialog({
|
|
|
5551
5555
|
}
|
|
5552
5556
|
});
|
|
5553
5557
|
const pickable = samples.filter((s) => s.id !== "empty-email");
|
|
5554
|
-
return /* @__PURE__ */
|
|
5558
|
+
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
5559
|
material.List,
|
|
5556
5560
|
{
|
|
5557
5561
|
dense: true,
|
|
@@ -5565,24 +5569,24 @@ function NewTemplatePickerDialog({
|
|
|
5565
5569
|
overflowY: "auto"
|
|
5566
5570
|
}
|
|
5567
5571
|
},
|
|
5568
|
-
/* @__PURE__ */
|
|
5572
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
5569
5573
|
material.ListItemButton,
|
|
5570
5574
|
{
|
|
5571
5575
|
selected: selectedStarter === null,
|
|
5572
5576
|
onClick: () => setSelectedStarter(null)
|
|
5573
5577
|
},
|
|
5574
|
-
/* @__PURE__ */
|
|
5578
|
+
/* @__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
5579
|
),
|
|
5576
|
-
pickable.map((s) => /* @__PURE__ */
|
|
5580
|
+
pickable.map((s) => /* @__PURE__ */ React62__default.default.createElement(
|
|
5577
5581
|
material.ListItemButton,
|
|
5578
5582
|
{
|
|
5579
5583
|
key: s.id,
|
|
5580
5584
|
selected: selectedStarter === s.id,
|
|
5581
5585
|
onClick: () => setSelectedStarter(s.id)
|
|
5582
5586
|
},
|
|
5583
|
-
/* @__PURE__ */
|
|
5587
|
+
/* @__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
5588
|
))
|
|
5585
|
-
), /* @__PURE__ */
|
|
5589
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
5586
5590
|
material.TextField,
|
|
5587
5591
|
{
|
|
5588
5592
|
autoFocus: true,
|
|
@@ -5602,7 +5606,7 @@ function NewTemplatePickerDialog({
|
|
|
5602
5606
|
helperText: error != null ? error : " ",
|
|
5603
5607
|
disabled: busy
|
|
5604
5608
|
}
|
|
5605
|
-
)), /* @__PURE__ */
|
|
5609
|
+
)), /* @__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
5610
|
}
|
|
5607
5611
|
function RenameDialog({
|
|
5608
5612
|
open,
|
|
@@ -5612,12 +5616,12 @@ function RenameDialog({
|
|
|
5612
5616
|
onClose,
|
|
5613
5617
|
onSubmit
|
|
5614
5618
|
}) {
|
|
5615
|
-
const [slug, setSlug] =
|
|
5616
|
-
const [tags, setTags] =
|
|
5617
|
-
const [tagInput, setTagInput] =
|
|
5618
|
-
const [error, setError] =
|
|
5619
|
-
const [submitting, setSubmitting] =
|
|
5620
|
-
|
|
5619
|
+
const [slug, setSlug] = React62.useState(currentSlug);
|
|
5620
|
+
const [tags, setTags] = React62.useState(currentTags);
|
|
5621
|
+
const [tagInput, setTagInput] = React62.useState("");
|
|
5622
|
+
const [error, setError] = React62.useState(null);
|
|
5623
|
+
const [submitting, setSubmitting] = React62.useState(false);
|
|
5624
|
+
React62.useEffect(() => {
|
|
5621
5625
|
if (open) {
|
|
5622
5626
|
setSlug(currentSlug);
|
|
5623
5627
|
setTags(currentTags);
|
|
@@ -5664,7 +5668,7 @@ function RenameDialog({
|
|
|
5664
5668
|
setSubmitting(false);
|
|
5665
5669
|
}
|
|
5666
5670
|
});
|
|
5667
|
-
return /* @__PURE__ */
|
|
5671
|
+
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
5672
|
material.TextField,
|
|
5669
5673
|
{
|
|
5670
5674
|
autoFocus: true,
|
|
@@ -5684,7 +5688,7 @@ function RenameDialog({
|
|
|
5684
5688
|
if (e.key === "Enter" && !submitting) handleSubmit();
|
|
5685
5689
|
}
|
|
5686
5690
|
}
|
|
5687
|
-
), /* @__PURE__ */
|
|
5691
|
+
), /* @__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
5692
|
material.Chip,
|
|
5689
5693
|
{
|
|
5690
5694
|
key: tag,
|
|
@@ -5692,7 +5696,7 @@ function RenameDialog({
|
|
|
5692
5696
|
size: "small",
|
|
5693
5697
|
onDelete: submitting ? void 0 : () => removeTag(tag)
|
|
5694
5698
|
}
|
|
5695
|
-
))) : /* @__PURE__ */
|
|
5699
|
+
))) : /* @__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
5700
|
material.TextField,
|
|
5697
5701
|
{
|
|
5698
5702
|
size: "small",
|
|
@@ -5711,20 +5715,20 @@ function RenameDialog({
|
|
|
5711
5715
|
}
|
|
5712
5716
|
},
|
|
5713
5717
|
InputProps: {
|
|
5714
|
-
endAdornment: /* @__PURE__ */
|
|
5718
|
+
endAdornment: /* @__PURE__ */ React62__default.default.createElement(material.InputAdornment, { position: "end" }, /* @__PURE__ */ React62__default.default.createElement(
|
|
5715
5719
|
material.Button,
|
|
5716
5720
|
{
|
|
5717
5721
|
size: "small",
|
|
5718
5722
|
onClick: addTag,
|
|
5719
5723
|
disabled: !tagInput.trim() || submitting,
|
|
5720
|
-
startIcon: /* @__PURE__ */
|
|
5724
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }),
|
|
5721
5725
|
sx: { textTransform: "none" }
|
|
5722
5726
|
},
|
|
5723
5727
|
t("common.add", "Add")
|
|
5724
5728
|
))
|
|
5725
5729
|
}
|
|
5726
5730
|
}
|
|
5727
|
-
), /* @__PURE__ */
|
|
5731
|
+
), /* @__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
5732
|
material.Button,
|
|
5729
5733
|
{
|
|
5730
5734
|
onClick: handleSubmit,
|
|
@@ -5743,10 +5747,10 @@ function SaveTemplateDialog({
|
|
|
5743
5747
|
error: externalError = null,
|
|
5744
5748
|
mode = "save-as"
|
|
5745
5749
|
}) {
|
|
5746
|
-
const [templateName, setTemplateName] =
|
|
5747
|
-
const [internalError, setInternalError] =
|
|
5748
|
-
const [isSubmitting, setIsSubmitting] =
|
|
5749
|
-
|
|
5750
|
+
const [templateName, setTemplateName] = React62.useState(defaultName);
|
|
5751
|
+
const [internalError, setInternalError] = React62.useState("");
|
|
5752
|
+
const [isSubmitting, setIsSubmitting] = React62.useState(false);
|
|
5753
|
+
React62.useEffect(() => {
|
|
5750
5754
|
if (open) {
|
|
5751
5755
|
setTemplateName(defaultName);
|
|
5752
5756
|
setInternalError("");
|
|
@@ -5794,7 +5798,7 @@ function SaveTemplateDialog({
|
|
|
5794
5798
|
setInternalError("");
|
|
5795
5799
|
onClose();
|
|
5796
5800
|
};
|
|
5797
|
-
return /* @__PURE__ */
|
|
5801
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
5798
5802
|
material.Dialog,
|
|
5799
5803
|
{
|
|
5800
5804
|
open,
|
|
@@ -5802,8 +5806,8 @@ function SaveTemplateDialog({
|
|
|
5802
5806
|
maxWidth: "sm",
|
|
5803
5807
|
fullWidth: true
|
|
5804
5808
|
},
|
|
5805
|
-
/* @__PURE__ */
|
|
5806
|
-
/* @__PURE__ */
|
|
5809
|
+
/* @__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")),
|
|
5810
|
+
/* @__PURE__ */ React62__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
5807
5811
|
material.TextField,
|
|
5808
5812
|
{
|
|
5809
5813
|
autoFocus: true,
|
|
@@ -5826,7 +5830,7 @@ function SaveTemplateDialog({
|
|
|
5826
5830
|
disabled: isSubmitting
|
|
5827
5831
|
}
|
|
5828
5832
|
))),
|
|
5829
|
-
/* @__PURE__ */
|
|
5833
|
+
/* @__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
5834
|
material.Button,
|
|
5831
5835
|
{
|
|
5832
5836
|
onClick: handleSave,
|
|
@@ -5896,19 +5900,19 @@ function SamplesDrawer({
|
|
|
5896
5900
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
5897
5901
|
const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
|
|
5898
5902
|
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] =
|
|
5903
|
+
const [samples, setSamples] = React62.useState([buildEmptyTemplate()]);
|
|
5904
|
+
const [templates, setTemplates] = React62.useState([]);
|
|
5905
|
+
const [loadingSamples, setLoadingSamples] = React62.useState(false);
|
|
5906
|
+
const [loadingTemplates, setLoadingTemplates] = React62.useState(false);
|
|
5907
|
+
const [templatesError, setTemplatesError] = React62.useState(null);
|
|
5908
|
+
const [activeLeftTab, setActiveLeftTab] = React62.useState("templates");
|
|
5909
|
+
const [search, setSearch] = React62.useState("");
|
|
5910
|
+
const [sortKey, setSortKey] = React62.useState("updatedAt");
|
|
5911
|
+
const [activeTags, setActiveTags] = React62.useState([]);
|
|
5912
|
+
const [renameTarget, setRenameTarget] = React62.useState(null);
|
|
5913
|
+
const [pendingSaveAs, setPendingSaveAs] = React62.useState(null);
|
|
5914
|
+
const [newError, setNewError] = React62.useState(null);
|
|
5915
|
+
const [pickerKind, setPickerKind] = React62.useState(null);
|
|
5912
5916
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
5913
5917
|
if (templateId === "empty-email") {
|
|
5914
5918
|
return empty_email_message_default;
|
|
@@ -5919,7 +5923,7 @@ function SamplesDrawer({
|
|
|
5919
5923
|
return null;
|
|
5920
5924
|
});
|
|
5921
5925
|
const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
|
|
5922
|
-
|
|
5926
|
+
React62.useEffect(() => {
|
|
5923
5927
|
if (!enabled || !samplesDrawerOpen || !loadSamples) return;
|
|
5924
5928
|
setLoadingSamples(true);
|
|
5925
5929
|
loadSamples().then((results) => {
|
|
@@ -5954,11 +5958,11 @@ function SamplesDrawer({
|
|
|
5954
5958
|
setTemplates((prev) => prev.some((t2) => t2.id === id) ? prev : [...prev, row]);
|
|
5955
5959
|
}
|
|
5956
5960
|
};
|
|
5957
|
-
|
|
5961
|
+
React62.useEffect(() => {
|
|
5958
5962
|
if (!enabled || !loadTemplates) return;
|
|
5959
5963
|
refreshTemplates();
|
|
5960
5964
|
}, [enabled, loadTemplates]);
|
|
5961
|
-
|
|
5965
|
+
React62.useEffect(() => {
|
|
5962
5966
|
const handler = (e) => {
|
|
5963
5967
|
const detail = e.detail;
|
|
5964
5968
|
if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
|
|
@@ -5966,7 +5970,7 @@ function SamplesDrawer({
|
|
|
5966
5970
|
window.addEventListener("templateListUpdated", handler);
|
|
5967
5971
|
return () => window.removeEventListener("templateListUpdated", handler);
|
|
5968
5972
|
}, []);
|
|
5969
|
-
const { templateRows, sampleRows } =
|
|
5973
|
+
const { templateRows, sampleRows } = React62.useMemo(() => {
|
|
5970
5974
|
const byId = /* @__PURE__ */ new Map();
|
|
5971
5975
|
for (const s of samples) byId.set(s.id, s);
|
|
5972
5976
|
for (const t2 of templates) byId.set(t2.id, t2);
|
|
@@ -5976,14 +5980,14 @@ function SamplesDrawer({
|
|
|
5976
5980
|
sampleRows: all.filter((t2) => t2.kind === "sample")
|
|
5977
5981
|
};
|
|
5978
5982
|
}, [samples, templates]);
|
|
5979
|
-
const allTags =
|
|
5983
|
+
const allTags = React62.useMemo(() => {
|
|
5980
5984
|
var _a2, _b2;
|
|
5981
5985
|
const set = /* @__PURE__ */ new Set();
|
|
5982
5986
|
for (const t2 of templateRows) (_a2 = t2.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
5983
5987
|
for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
|
|
5984
5988
|
return Array.from(set).sort();
|
|
5985
5989
|
}, [templateRows, sampleRows]);
|
|
5986
|
-
const matchesSearchAndTags =
|
|
5990
|
+
const matchesSearchAndTags = React62.useMemo(() => {
|
|
5987
5991
|
const term = search.trim().toLowerCase();
|
|
5988
5992
|
return (t2) => {
|
|
5989
5993
|
if (term) {
|
|
@@ -5997,11 +6001,11 @@ function SamplesDrawer({
|
|
|
5997
6001
|
return true;
|
|
5998
6002
|
};
|
|
5999
6003
|
}, [search, activeTags]);
|
|
6000
|
-
const filteredTemplates =
|
|
6004
|
+
const filteredTemplates = React62.useMemo(
|
|
6001
6005
|
() => templateRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
6002
6006
|
[templateRows, matchesSearchAndTags, sortKey]
|
|
6003
6007
|
);
|
|
6004
|
-
const filteredSamples =
|
|
6008
|
+
const filteredSamples = React62.useMemo(
|
|
6005
6009
|
() => sampleRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
6006
6010
|
[sampleRows, matchesSearchAndTags, sortKey]
|
|
6007
6011
|
);
|
|
@@ -6147,7 +6151,7 @@ function SamplesDrawer({
|
|
|
6147
6151
|
return null;
|
|
6148
6152
|
}
|
|
6149
6153
|
const existingSlugs = templates.map((t2) => t2.slug);
|
|
6150
|
-
return /* @__PURE__ */
|
|
6154
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
6151
6155
|
material.Drawer,
|
|
6152
6156
|
{
|
|
6153
6157
|
variant: "persistent",
|
|
@@ -6162,7 +6166,7 @@ function SamplesDrawer({
|
|
|
6162
6166
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
6163
6167
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
6164
6168
|
},
|
|
6165
|
-
/* @__PURE__ */
|
|
6169
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6166
6170
|
material.Stack,
|
|
6167
6171
|
{
|
|
6168
6172
|
py: 1,
|
|
@@ -6172,16 +6176,16 @@ function SamplesDrawer({
|
|
|
6172
6176
|
spacing: 1.5,
|
|
6173
6177
|
sx: { overflowY: "auto" }
|
|
6174
6178
|
},
|
|
6175
|
-
/* @__PURE__ */
|
|
6179
|
+
/* @__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
6180
|
material.IconButton,
|
|
6177
6181
|
{
|
|
6178
6182
|
size: "small",
|
|
6179
6183
|
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
6180
6184
|
"aria-label": activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template")
|
|
6181
6185
|
},
|
|
6182
|
-
/* @__PURE__ */
|
|
6186
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6183
6187
|
))),
|
|
6184
|
-
/* @__PURE__ */
|
|
6188
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6185
6189
|
material.Tabs,
|
|
6186
6190
|
{
|
|
6187
6191
|
value: activeLeftTab,
|
|
@@ -6189,11 +6193,11 @@ function SamplesDrawer({
|
|
|
6189
6193
|
variant: "fullWidth",
|
|
6190
6194
|
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
6191
6195
|
},
|
|
6192
|
-
/* @__PURE__ */
|
|
6193
|
-
/* @__PURE__ */
|
|
6194
|
-
/* @__PURE__ */
|
|
6196
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "templates", label: t("drawer.tab.templates", "Templates"), disabled: !loadTemplates }),
|
|
6197
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "samples", label: t("drawer.tab.samples", "Samples") }),
|
|
6198
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Tab, { value: "outline", label: t("drawer.tab.outline", "Outline") })
|
|
6195
6199
|
),
|
|
6196
|
-
activeLeftTab === "outline" ? /* @__PURE__ */
|
|
6200
|
+
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
6201
|
material.TextField,
|
|
6198
6202
|
{
|
|
6199
6203
|
size: "small",
|
|
@@ -6201,10 +6205,10 @@ function SamplesDrawer({
|
|
|
6201
6205
|
value: search,
|
|
6202
6206
|
onChange: (e) => setSearch(e.target.value),
|
|
6203
6207
|
InputProps: {
|
|
6204
|
-
startAdornment: /* @__PURE__ */
|
|
6208
|
+
startAdornment: /* @__PURE__ */ React62__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
6205
6209
|
}
|
|
6206
6210
|
}
|
|
6207
|
-
), /* @__PURE__ */
|
|
6211
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
6208
6212
|
material.TextField,
|
|
6209
6213
|
{
|
|
6210
6214
|
select: true,
|
|
@@ -6213,8 +6217,8 @@ function SamplesDrawer({
|
|
|
6213
6217
|
value: sortKey,
|
|
6214
6218
|
onChange: (e) => setSortKey(e.target.value)
|
|
6215
6219
|
},
|
|
6216
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
6217
|
-
), allTags.length > 0 && /* @__PURE__ */
|
|
6220
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, t(opt.labelKey, opt.fallback)))
|
|
6221
|
+
), allTags.length > 0 && /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
6218
6222
|
material.Chip,
|
|
6219
6223
|
{
|
|
6220
6224
|
label: t("drawer.tag.all", "All"),
|
|
@@ -6224,18 +6228,18 @@ function SamplesDrawer({
|
|
|
6224
6228
|
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
6225
6229
|
onClick: () => setActiveTags([])
|
|
6226
6230
|
}
|
|
6227
|
-
), allTags.map((tag) => /* @__PURE__ */
|
|
6231
|
+
), allTags.map((tag) => /* @__PURE__ */ React62__default.default.createElement(
|
|
6228
6232
|
material.Chip,
|
|
6229
6233
|
{
|
|
6230
6234
|
key: tag,
|
|
6231
|
-
label: tag,
|
|
6235
|
+
label: t(`tag.${tag}`, tag),
|
|
6232
6236
|
size: "small",
|
|
6233
6237
|
clickable: true,
|
|
6234
6238
|
color: activeTags.includes(tag) ? "primary" : "default",
|
|
6235
6239
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
6236
6240
|
onClick: () => toggleTag(tag)
|
|
6237
6241
|
}
|
|
6238
|
-
))), activeLeftTab === "templates" ? /* @__PURE__ */
|
|
6242
|
+
))), 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
6243
|
TemplateRow,
|
|
6240
6244
|
{
|
|
6241
6245
|
key: template.id,
|
|
@@ -6247,7 +6251,7 @@ function SamplesDrawer({
|
|
|
6247
6251
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
6248
6252
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
6249
6253
|
}
|
|
6250
|
-
))) : /* @__PURE__ */
|
|
6254
|
+
))) : /* @__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
6255
|
TemplateRow,
|
|
6252
6256
|
{
|
|
6253
6257
|
key: sample.id,
|
|
@@ -6259,9 +6263,9 @@ function SamplesDrawer({
|
|
|
6259
6263
|
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
6260
6264
|
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
6261
6265
|
}
|
|
6262
|
-
))) : /* @__PURE__ */
|
|
6266
|
+
))) : /* @__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
6267
|
)
|
|
6264
|
-
), renameTarget && /* @__PURE__ */
|
|
6268
|
+
), renameTarget && /* @__PURE__ */ React62__default.default.createElement(
|
|
6265
6269
|
RenameDialog,
|
|
6266
6270
|
{
|
|
6267
6271
|
open: !!renameTarget,
|
|
@@ -6271,7 +6275,7 @@ function SamplesDrawer({
|
|
|
6271
6275
|
onClose: () => setRenameTarget(null),
|
|
6272
6276
|
onSubmit: handleRenameSubmit
|
|
6273
6277
|
}
|
|
6274
|
-
), /* @__PURE__ */
|
|
6278
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
6275
6279
|
SaveTemplateDialog,
|
|
6276
6280
|
{
|
|
6277
6281
|
open: !!pendingSaveAs,
|
|
@@ -6284,7 +6288,7 @@ function SamplesDrawer({
|
|
|
6284
6288
|
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
6285
6289
|
error: newError
|
|
6286
6290
|
}
|
|
6287
|
-
), /* @__PURE__ */
|
|
6291
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
6288
6292
|
NewTemplatePickerDialog,
|
|
6289
6293
|
{
|
|
6290
6294
|
open: pickerKind !== null,
|
|
@@ -6308,7 +6312,7 @@ var ICON_SX = {
|
|
|
6308
6312
|
borderColor: "cadet.300"
|
|
6309
6313
|
};
|
|
6310
6314
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
6311
|
-
return /* @__PURE__ */
|
|
6315
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6312
6316
|
material.Button,
|
|
6313
6317
|
{
|
|
6314
6318
|
sx: BUTTON_SX2,
|
|
@@ -6317,14 +6321,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
6317
6321
|
onClick();
|
|
6318
6322
|
}
|
|
6319
6323
|
},
|
|
6320
|
-
/* @__PURE__ */
|
|
6321
|
-
/* @__PURE__ */
|
|
6324
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
6325
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
6322
6326
|
);
|
|
6323
6327
|
}
|
|
6324
6328
|
var BUTTONS = [
|
|
6325
6329
|
{
|
|
6326
6330
|
label: "Heading",
|
|
6327
|
-
icon: /* @__PURE__ */
|
|
6331
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
6328
6332
|
block: () => ({
|
|
6329
6333
|
type: "Heading",
|
|
6330
6334
|
data: {
|
|
@@ -6337,7 +6341,7 @@ var BUTTONS = [
|
|
|
6337
6341
|
},
|
|
6338
6342
|
{
|
|
6339
6343
|
label: "Text",
|
|
6340
|
-
icon: /* @__PURE__ */
|
|
6344
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
6341
6345
|
block: () => ({
|
|
6342
6346
|
type: "Text",
|
|
6343
6347
|
data: {
|
|
@@ -6351,7 +6355,7 @@ var BUTTONS = [
|
|
|
6351
6355
|
},
|
|
6352
6356
|
{
|
|
6353
6357
|
label: "Button",
|
|
6354
|
-
icon: /* @__PURE__ */
|
|
6358
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
6355
6359
|
block: () => ({
|
|
6356
6360
|
type: "Button",
|
|
6357
6361
|
data: {
|
|
@@ -6365,7 +6369,7 @@ var BUTTONS = [
|
|
|
6365
6369
|
},
|
|
6366
6370
|
{
|
|
6367
6371
|
label: "Image",
|
|
6368
|
-
icon: /* @__PURE__ */
|
|
6372
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
6369
6373
|
block: () => ({
|
|
6370
6374
|
type: "Image",
|
|
6371
6375
|
data: {
|
|
@@ -6381,7 +6385,7 @@ var BUTTONS = [
|
|
|
6381
6385
|
},
|
|
6382
6386
|
{
|
|
6383
6387
|
label: "Avatar",
|
|
6384
|
-
icon: /* @__PURE__ */
|
|
6388
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
6385
6389
|
block: () => ({
|
|
6386
6390
|
type: "Avatar",
|
|
6387
6391
|
data: {
|
|
@@ -6395,7 +6399,7 @@ var BUTTONS = [
|
|
|
6395
6399
|
},
|
|
6396
6400
|
{
|
|
6397
6401
|
label: "Personal Signature",
|
|
6398
|
-
icon: /* @__PURE__ */
|
|
6402
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
|
|
6399
6403
|
block: () => ({
|
|
6400
6404
|
type: "Signature",
|
|
6401
6405
|
data: {
|
|
@@ -6417,7 +6421,7 @@ var BUTTONS = [
|
|
|
6417
6421
|
},
|
|
6418
6422
|
{
|
|
6419
6423
|
label: "Company Signature",
|
|
6420
|
-
icon: /* @__PURE__ */
|
|
6424
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.BusinessOutlined, null),
|
|
6421
6425
|
block: () => ({
|
|
6422
6426
|
type: "Signature",
|
|
6423
6427
|
data: {
|
|
@@ -6437,7 +6441,7 @@ var BUTTONS = [
|
|
|
6437
6441
|
},
|
|
6438
6442
|
{
|
|
6439
6443
|
label: "Divider",
|
|
6440
|
-
icon: /* @__PURE__ */
|
|
6444
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
6441
6445
|
block: () => ({
|
|
6442
6446
|
type: "Divider",
|
|
6443
6447
|
data: {
|
|
@@ -6450,7 +6454,7 @@ var BUTTONS = [
|
|
|
6450
6454
|
},
|
|
6451
6455
|
{
|
|
6452
6456
|
label: "Spacer",
|
|
6453
|
-
icon: /* @__PURE__ */
|
|
6457
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
6454
6458
|
block: () => ({
|
|
6455
6459
|
type: "Spacer",
|
|
6456
6460
|
data: {}
|
|
@@ -6458,7 +6462,7 @@ var BUTTONS = [
|
|
|
6458
6462
|
},
|
|
6459
6463
|
{
|
|
6460
6464
|
label: "Html",
|
|
6461
|
-
icon: /* @__PURE__ */
|
|
6465
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
6462
6466
|
block: () => ({
|
|
6463
6467
|
type: "Html",
|
|
6464
6468
|
data: {
|
|
@@ -6473,7 +6477,7 @@ var BUTTONS = [
|
|
|
6473
6477
|
},
|
|
6474
6478
|
{
|
|
6475
6479
|
label: "Columns",
|
|
6476
|
-
icon: /* @__PURE__ */
|
|
6480
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
6477
6481
|
block: () => ({
|
|
6478
6482
|
type: "ColumnsContainer",
|
|
6479
6483
|
data: {
|
|
@@ -6488,7 +6492,7 @@ var BUTTONS = [
|
|
|
6488
6492
|
},
|
|
6489
6493
|
{
|
|
6490
6494
|
label: "Container",
|
|
6491
|
-
icon: /* @__PURE__ */
|
|
6495
|
+
icon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
6492
6496
|
block: () => ({
|
|
6493
6497
|
type: "Container",
|
|
6494
6498
|
data: {
|
|
@@ -6501,6 +6505,20 @@ var BUTTONS = [
|
|
|
6501
6505
|
];
|
|
6502
6506
|
|
|
6503
6507
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/blocks-menu.tsx
|
|
6508
|
+
var LABEL_KEYS = {
|
|
6509
|
+
Heading: "block-add.heading",
|
|
6510
|
+
Text: "block-add.text",
|
|
6511
|
+
Button: "block-add.button",
|
|
6512
|
+
Image: "block-add.image",
|
|
6513
|
+
Avatar: "block-add.avatar",
|
|
6514
|
+
"Personal Signature": "block-add.personal-signature",
|
|
6515
|
+
"Company Signature": "block-add.company-signature",
|
|
6516
|
+
Divider: "block-add.divider",
|
|
6517
|
+
Spacer: "block-add.spacer",
|
|
6518
|
+
Html: "block-add.html",
|
|
6519
|
+
Columns: "block-add.columns",
|
|
6520
|
+
Container: "block-add.container"
|
|
6521
|
+
};
|
|
6504
6522
|
function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
6505
6523
|
const onClose = () => {
|
|
6506
6524
|
setAnchorEl(null);
|
|
@@ -6512,7 +6530,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6512
6530
|
if (anchorEl === null) {
|
|
6513
6531
|
return null;
|
|
6514
6532
|
}
|
|
6515
|
-
return /* @__PURE__ */
|
|
6533
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6516
6534
|
material.Menu,
|
|
6517
6535
|
{
|
|
6518
6536
|
open: true,
|
|
@@ -6521,12 +6539,20 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6521
6539
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
6522
6540
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
6523
6541
|
},
|
|
6524
|
-
/* @__PURE__ */
|
|
6542
|
+
/* @__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(
|
|
6543
|
+
BlockTypeButton,
|
|
6544
|
+
{
|
|
6545
|
+
key: i,
|
|
6546
|
+
label: LABEL_KEYS[k.label] ? t(LABEL_KEYS[k.label], k.label) : k.label,
|
|
6547
|
+
icon: k.icon,
|
|
6548
|
+
onClick: () => onClick(k.block())
|
|
6549
|
+
}
|
|
6550
|
+
)))
|
|
6525
6551
|
);
|
|
6526
6552
|
}
|
|
6527
6553
|
function DividerButton({ buttonElement, onClick }) {
|
|
6528
|
-
const [visible, setVisible] =
|
|
6529
|
-
|
|
6554
|
+
const [visible, setVisible] = React62.useState(false);
|
|
6555
|
+
React62.useEffect(() => {
|
|
6530
6556
|
function listener({ clientX, clientY }) {
|
|
6531
6557
|
if (!buttonElement) {
|
|
6532
6558
|
return;
|
|
@@ -6548,7 +6574,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6548
6574
|
window.removeEventListener("mousemove", listener);
|
|
6549
6575
|
};
|
|
6550
6576
|
}, [buttonElement, setVisible]);
|
|
6551
|
-
return /* @__PURE__ */
|
|
6577
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React62__default.default.createElement(
|
|
6552
6578
|
material.IconButton,
|
|
6553
6579
|
{
|
|
6554
6580
|
size: "small",
|
|
@@ -6571,11 +6597,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6571
6597
|
onClick();
|
|
6572
6598
|
}
|
|
6573
6599
|
},
|
|
6574
|
-
/* @__PURE__ */
|
|
6600
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6575
6601
|
));
|
|
6576
6602
|
}
|
|
6577
6603
|
function PlaceholderButton({ onClick }) {
|
|
6578
|
-
return /* @__PURE__ */
|
|
6604
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6579
6605
|
material.ButtonBase,
|
|
6580
6606
|
{
|
|
6581
6607
|
onClick: (ev) => {
|
|
@@ -6591,7 +6617,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
6591
6617
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
6592
6618
|
}
|
|
6593
6619
|
},
|
|
6594
|
-
/* @__PURE__ */
|
|
6620
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6595
6621
|
iconsMaterial.AddOutlined,
|
|
6596
6622
|
{
|
|
6597
6623
|
sx: {
|
|
@@ -6608,29 +6634,29 @@ function PlaceholderButton({ onClick }) {
|
|
|
6608
6634
|
|
|
6609
6635
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
6610
6636
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
6611
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
6612
|
-
const [buttonElement, setButtonElement] =
|
|
6637
|
+
const [menuAnchorEl, setMenuAnchorEl] = React62.useState(null);
|
|
6638
|
+
const [buttonElement, setButtonElement] = React62.useState(null);
|
|
6613
6639
|
const handleButtonClick = () => {
|
|
6614
6640
|
setMenuAnchorEl(buttonElement);
|
|
6615
6641
|
};
|
|
6616
6642
|
const renderButton2 = () => {
|
|
6617
6643
|
if (placeholder) {
|
|
6618
|
-
return /* @__PURE__ */
|
|
6644
|
+
return /* @__PURE__ */ React62__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
6619
6645
|
} else {
|
|
6620
|
-
return /* @__PURE__ */
|
|
6646
|
+
return /* @__PURE__ */ React62__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
6621
6647
|
}
|
|
6622
6648
|
};
|
|
6623
|
-
return /* @__PURE__ */
|
|
6649
|
+
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
6650
|
}
|
|
6625
|
-
var BlockParentContext =
|
|
6651
|
+
var BlockParentContext = React62.createContext(null);
|
|
6626
6652
|
function BlockParentProvider({
|
|
6627
6653
|
info,
|
|
6628
6654
|
children
|
|
6629
6655
|
}) {
|
|
6630
|
-
return /* @__PURE__ */
|
|
6656
|
+
return /* @__PURE__ */ React62__default.default.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6631
6657
|
}
|
|
6632
6658
|
function useBlockParent() {
|
|
6633
|
-
return
|
|
6659
|
+
return React62.useContext(BlockParentContext);
|
|
6634
6660
|
}
|
|
6635
6661
|
|
|
6636
6662
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -6657,9 +6683,9 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6657
6683
|
});
|
|
6658
6684
|
};
|
|
6659
6685
|
if (!childrenIds || childrenIds.length === 0) {
|
|
6660
|
-
return /* @__PURE__ */
|
|
6686
|
+
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
6687
|
}
|
|
6662
|
-
return /* @__PURE__ */
|
|
6688
|
+
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
6689
|
}
|
|
6664
6690
|
function CanvasDropZone({
|
|
6665
6691
|
parentRef,
|
|
@@ -6668,7 +6694,7 @@ function CanvasDropZone({
|
|
|
6668
6694
|
}) {
|
|
6669
6695
|
const document2 = useDocument();
|
|
6670
6696
|
const dragging = useDraggingBlock();
|
|
6671
|
-
const [over, setOver] =
|
|
6697
|
+
const [over, setOver] = React62.useState(false);
|
|
6672
6698
|
if (!dragging) return null;
|
|
6673
6699
|
if (isDescendant(document2, dragging.sourceId, parentRef.parentId)) return null;
|
|
6674
6700
|
const handleDragOver = (e) => {
|
|
@@ -6696,7 +6722,7 @@ function CanvasDropZone({
|
|
|
6696
6722
|
}
|
|
6697
6723
|
setDraggingBlock(null);
|
|
6698
6724
|
};
|
|
6699
|
-
return /* @__PURE__ */
|
|
6725
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6700
6726
|
material.Box,
|
|
6701
6727
|
{
|
|
6702
6728
|
onDragOver: handleDragOver,
|
|
@@ -6739,13 +6765,13 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6739
6765
|
});
|
|
6740
6766
|
setSelectedBlockId(blockId);
|
|
6741
6767
|
};
|
|
6742
|
-
return /* @__PURE__ */
|
|
6768
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
6743
6769
|
columns_container_default,
|
|
6744
6770
|
{
|
|
6745
6771
|
props: restProps,
|
|
6746
6772
|
style,
|
|
6747
6773
|
columns: [
|
|
6748
|
-
/* @__PURE__ */
|
|
6774
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6749
6775
|
EditorChildrenIds,
|
|
6750
6776
|
{
|
|
6751
6777
|
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
@@ -6753,7 +6779,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6753
6779
|
onChange: (change) => updateColumn(0, change)
|
|
6754
6780
|
}
|
|
6755
6781
|
),
|
|
6756
|
-
/* @__PURE__ */
|
|
6782
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6757
6783
|
EditorChildrenIds,
|
|
6758
6784
|
{
|
|
6759
6785
|
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
@@ -6761,7 +6787,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6761
6787
|
onChange: (change) => updateColumn(1, change)
|
|
6762
6788
|
}
|
|
6763
6789
|
),
|
|
6764
|
-
/* @__PURE__ */
|
|
6790
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
6765
6791
|
EditorChildrenIds,
|
|
6766
6792
|
{
|
|
6767
6793
|
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
@@ -6778,7 +6804,7 @@ function ContainerEditor({ style, props }) {
|
|
|
6778
6804
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
6779
6805
|
const document2 = useDocument();
|
|
6780
6806
|
const currentBlockId = useCurrentBlockId();
|
|
6781
|
-
return /* @__PURE__ */
|
|
6807
|
+
return /* @__PURE__ */ React62__default.default.createElement(container_default, { style }, /* @__PURE__ */ React62__default.default.createElement(
|
|
6782
6808
|
EditorChildrenIds,
|
|
6783
6809
|
{
|
|
6784
6810
|
childrenIds,
|
|
@@ -6885,7 +6911,7 @@ function EmailLayoutEditor(props) {
|
|
|
6885
6911
|
const document2 = useDocument();
|
|
6886
6912
|
const currentBlockId = useCurrentBlockId();
|
|
6887
6913
|
const selectedBlockId = useSelectedBlockId();
|
|
6888
|
-
const handleDelete =
|
|
6914
|
+
const handleDelete = React62.useCallback((e) => {
|
|
6889
6915
|
var _a2, _b2, _c2;
|
|
6890
6916
|
if (e.key !== "Delete" && e.key !== "Backspace") return;
|
|
6891
6917
|
if (!selectedBlockId) return;
|
|
@@ -6916,7 +6942,7 @@ function EmailLayoutEditor(props) {
|
|
|
6916
6942
|
delete nDocument[selectedBlockId];
|
|
6917
6943
|
replaceDocument(nDocument);
|
|
6918
6944
|
}, [selectedBlockId, document2]);
|
|
6919
|
-
const handleCopy =
|
|
6945
|
+
const handleCopy = React62.useCallback((e) => {
|
|
6920
6946
|
if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
|
|
6921
6947
|
if (!selectedBlockId) return;
|
|
6922
6948
|
const target = e.target;
|
|
@@ -6929,7 +6955,7 @@ function EmailLayoutEditor(props) {
|
|
|
6929
6955
|
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
|
|
6930
6956
|
navigator.clipboard.writeText(payload);
|
|
6931
6957
|
}, [selectedBlockId, document2]);
|
|
6932
|
-
const handlePaste =
|
|
6958
|
+
const handlePaste = React62.useCallback((e) => __async(null, null, function* () {
|
|
6933
6959
|
var _a2;
|
|
6934
6960
|
const target = e.target;
|
|
6935
6961
|
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
@@ -6960,7 +6986,7 @@ function EmailLayoutEditor(props) {
|
|
|
6960
6986
|
replaceDocument(doc);
|
|
6961
6987
|
setSelectedBlockId(newRootId);
|
|
6962
6988
|
}), [document2, childrenIds, selectedBlockId, currentBlockId]);
|
|
6963
|
-
|
|
6989
|
+
React62.useEffect(() => {
|
|
6964
6990
|
window.addEventListener("keydown", handleDelete);
|
|
6965
6991
|
window.addEventListener("keydown", handleCopy);
|
|
6966
6992
|
window.addEventListener("paste", handlePaste);
|
|
@@ -6979,7 +7005,7 @@ function EmailLayoutEditor(props) {
|
|
|
6979
7005
|
lineHeight: "1.5",
|
|
6980
7006
|
margin: "0"
|
|
6981
7007
|
};
|
|
6982
|
-
const editorChildren = /* @__PURE__ */
|
|
7008
|
+
const editorChildren = /* @__PURE__ */ React62__default.default.createElement(
|
|
6983
7009
|
EditorChildrenIds,
|
|
6984
7010
|
{
|
|
6985
7011
|
childrenIds,
|
|
@@ -7006,7 +7032,7 @@ function EmailLayoutEditor(props) {
|
|
|
7006
7032
|
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
7007
7033
|
};
|
|
7008
7034
|
if (props.backdropDisabled) {
|
|
7009
|
-
return /* @__PURE__ */
|
|
7035
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
7010
7036
|
"div",
|
|
7011
7037
|
{
|
|
7012
7038
|
onClick: () => {
|
|
@@ -7018,7 +7044,7 @@ function EmailLayoutEditor(props) {
|
|
|
7018
7044
|
minHeight: "100%"
|
|
7019
7045
|
})
|
|
7020
7046
|
},
|
|
7021
|
-
/* @__PURE__ */
|
|
7047
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
7022
7048
|
"div",
|
|
7023
7049
|
{
|
|
7024
7050
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -7026,11 +7052,11 @@ function EmailLayoutEditor(props) {
|
|
|
7026
7052
|
padding: "32px"
|
|
7027
7053
|
})
|
|
7028
7054
|
},
|
|
7029
|
-
/* @__PURE__ */
|
|
7055
|
+
/* @__PURE__ */ React62__default.default.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
7030
7056
|
)
|
|
7031
7057
|
);
|
|
7032
7058
|
}
|
|
7033
|
-
return /* @__PURE__ */
|
|
7059
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
7034
7060
|
"div",
|
|
7035
7061
|
{
|
|
7036
7062
|
onClick: () => {
|
|
@@ -7042,7 +7068,7 @@ function EmailLayoutEditor(props) {
|
|
|
7042
7068
|
minHeight: "100%"
|
|
7043
7069
|
})
|
|
7044
7070
|
},
|
|
7045
|
-
/* @__PURE__ */
|
|
7071
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
7046
7072
|
"div",
|
|
7047
7073
|
{
|
|
7048
7074
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -7050,7 +7076,7 @@ function EmailLayoutEditor(props) {
|
|
|
7050
7076
|
padding: "32px 0"
|
|
7051
7077
|
})
|
|
7052
7078
|
},
|
|
7053
|
-
/* @__PURE__ */
|
|
7079
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
7054
7080
|
"table",
|
|
7055
7081
|
{
|
|
7056
7082
|
align: "center",
|
|
@@ -7074,7 +7100,7 @@ function EmailLayoutEditor(props) {
|
|
|
7074
7100
|
cellPadding: "0",
|
|
7075
7101
|
border: 0
|
|
7076
7102
|
},
|
|
7077
|
-
/* @__PURE__ */
|
|
7103
|
+
/* @__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
7104
|
)
|
|
7079
7105
|
)
|
|
7080
7106
|
);
|
|
@@ -7234,7 +7260,7 @@ function TuneMenu({ blockId }) {
|
|
|
7234
7260
|
resetDocument(nDocument);
|
|
7235
7261
|
setSelectedBlockId(blockId);
|
|
7236
7262
|
};
|
|
7237
|
-
return /* @__PURE__ */
|
|
7263
|
+
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
7264
|
}
|
|
7239
7265
|
|
|
7240
7266
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
@@ -7243,7 +7269,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7243
7269
|
const hoveredBlockId = useHoveredBlockId();
|
|
7244
7270
|
const draggingBlock = useDraggingBlock();
|
|
7245
7271
|
const blockParent = useBlockParent();
|
|
7246
|
-
const [mouseInside, setMouseInside] =
|
|
7272
|
+
const [mouseInside, setMouseInside] = React62.useState(false);
|
|
7247
7273
|
const blockId = useCurrentBlockId();
|
|
7248
7274
|
const isBeingDragged = (draggingBlock == null ? void 0 : draggingBlock.sourceId) === blockId;
|
|
7249
7275
|
let outline;
|
|
@@ -7256,7 +7282,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7256
7282
|
if (selectedBlockId !== blockId) {
|
|
7257
7283
|
return null;
|
|
7258
7284
|
}
|
|
7259
|
-
return /* @__PURE__ */
|
|
7285
|
+
return /* @__PURE__ */ React62__default.default.createElement(TuneMenu, { blockId });
|
|
7260
7286
|
};
|
|
7261
7287
|
const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
|
|
7262
7288
|
const handleDragStart = (e) => {
|
|
@@ -7269,7 +7295,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7269
7295
|
const handleDragEnd = () => {
|
|
7270
7296
|
setDraggingBlock(null);
|
|
7271
7297
|
};
|
|
7272
|
-
return /* @__PURE__ */
|
|
7298
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
7273
7299
|
material.Box,
|
|
7274
7300
|
{
|
|
7275
7301
|
draggable,
|
|
@@ -7360,8 +7386,8 @@ function ButtonEditor({ style, props }) {
|
|
|
7360
7386
|
const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
|
|
7361
7387
|
const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
|
|
7362
7388
|
const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
|
|
7363
|
-
const [localText, setLocalText] =
|
|
7364
|
-
|
|
7389
|
+
const [localText, setLocalText] = React62.useState(text);
|
|
7390
|
+
React62.useEffect(() => {
|
|
7365
7391
|
setLocalText(text);
|
|
7366
7392
|
}, [text]);
|
|
7367
7393
|
const padding = getButtonSizePadding2(props);
|
|
@@ -7414,7 +7440,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7414
7440
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7415
7441
|
});
|
|
7416
7442
|
};
|
|
7417
|
-
return /* @__PURE__ */
|
|
7443
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62__default.default.createElement(
|
|
7418
7444
|
"input",
|
|
7419
7445
|
{
|
|
7420
7446
|
type: "text",
|
|
@@ -7431,18 +7457,18 @@ function ButtonEditor({ style, props }) {
|
|
|
7431
7457
|
}
|
|
7432
7458
|
));
|
|
7433
7459
|
}
|
|
7434
|
-
return /* @__PURE__ */
|
|
7460
|
+
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
7461
|
}
|
|
7436
7462
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
7437
|
-
const textareaRef =
|
|
7438
|
-
const [selection, setSelection] =
|
|
7439
|
-
const [linkPrompt, setLinkPrompt] =
|
|
7440
|
-
const pendingSelectionRef =
|
|
7441
|
-
const textRef =
|
|
7442
|
-
|
|
7463
|
+
const textareaRef = React62.useRef(null);
|
|
7464
|
+
const [selection, setSelection] = React62.useState({ start: 0, end: 0 });
|
|
7465
|
+
const [linkPrompt, setLinkPrompt] = React62.useState(false);
|
|
7466
|
+
const pendingSelectionRef = React62.useRef(null);
|
|
7467
|
+
const textRef = React62.useRef(text);
|
|
7468
|
+
React62.useEffect(() => {
|
|
7443
7469
|
textRef.current = text;
|
|
7444
7470
|
}, [text]);
|
|
7445
|
-
const syncSelection =
|
|
7471
|
+
const syncSelection = React62.useCallback(
|
|
7446
7472
|
(start, end) => {
|
|
7447
7473
|
const next = { start, end };
|
|
7448
7474
|
setSelection(next);
|
|
@@ -7450,7 +7476,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7450
7476
|
},
|
|
7451
7477
|
[trackSelection]
|
|
7452
7478
|
);
|
|
7453
|
-
const trackFocus =
|
|
7479
|
+
const trackFocus = React62.useCallback(
|
|
7454
7480
|
(e) => {
|
|
7455
7481
|
var _a, _b;
|
|
7456
7482
|
const el = e.currentTarget;
|
|
@@ -7460,7 +7486,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7460
7486
|
},
|
|
7461
7487
|
[syncSelection]
|
|
7462
7488
|
);
|
|
7463
|
-
|
|
7489
|
+
React62.useEffect(() => {
|
|
7464
7490
|
const target = pendingSelectionRef.current;
|
|
7465
7491
|
if (!target) return;
|
|
7466
7492
|
const ta = textareaRef.current;
|
|
@@ -7470,7 +7496,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7470
7496
|
syncSelection(target.start, target.end);
|
|
7471
7497
|
pendingSelectionRef.current = null;
|
|
7472
7498
|
}, [text, syncSelection]);
|
|
7473
|
-
|
|
7499
|
+
React62.useEffect(() => {
|
|
7474
7500
|
if (!isSelected || selection.start === selection.end) {
|
|
7475
7501
|
setLinkPrompt(false);
|
|
7476
7502
|
}
|
|
@@ -7563,9 +7589,9 @@ function InlineFormattingToolbar({
|
|
|
7563
7589
|
onLinkSubmit,
|
|
7564
7590
|
onLinkCancel
|
|
7565
7591
|
}) {
|
|
7566
|
-
const [url, setUrl] =
|
|
7567
|
-
const inputRef =
|
|
7568
|
-
|
|
7592
|
+
const [url, setUrl] = React62.useState("");
|
|
7593
|
+
const inputRef = React62.useRef(null);
|
|
7594
|
+
React62.useEffect(() => {
|
|
7569
7595
|
if (linkPrompt) {
|
|
7570
7596
|
setUrl("");
|
|
7571
7597
|
setTimeout(() => {
|
|
@@ -7575,7 +7601,7 @@ function InlineFormattingToolbar({
|
|
|
7575
7601
|
}
|
|
7576
7602
|
}, [linkPrompt]);
|
|
7577
7603
|
const preventBlur = (e) => e.preventDefault();
|
|
7578
|
-
return /* @__PURE__ */
|
|
7604
|
+
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
7605
|
material.TextField,
|
|
7580
7606
|
{
|
|
7581
7607
|
inputRef,
|
|
@@ -7597,7 +7623,7 @@ function InlineFormattingToolbar({
|
|
|
7597
7623
|
},
|
|
7598
7624
|
sx: { width: 220 }
|
|
7599
7625
|
}
|
|
7600
|
-
)) : /* @__PURE__ */
|
|
7626
|
+
)) : /* @__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
7627
|
}
|
|
7602
7628
|
|
|
7603
7629
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -7670,11 +7696,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7670
7696
|
const isSelected = selectedBlockId === blockId;
|
|
7671
7697
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
7672
7698
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
7673
|
-
const [localText, setLocalText] =
|
|
7699
|
+
const [localText, setLocalText] = React62.useState(textContent);
|
|
7674
7700
|
const isMarkdown = (_c = props == null ? void 0 : props.markdown) != null ? _c : false;
|
|
7675
7701
|
const rootBlock = document2.root;
|
|
7676
7702
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
7677
|
-
|
|
7703
|
+
React62.useEffect(() => {
|
|
7678
7704
|
setLocalText(textContent);
|
|
7679
7705
|
}, [textContent]);
|
|
7680
7706
|
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -7720,9 +7746,9 @@ function HeadingEditor({ style, props }) {
|
|
|
7720
7746
|
const handleTextChange = (e) => {
|
|
7721
7747
|
commitText(e.target.value);
|
|
7722
7748
|
};
|
|
7723
|
-
const displayRef =
|
|
7724
|
-
const lastDisplayHeightRef =
|
|
7725
|
-
|
|
7749
|
+
const displayRef = React62.useRef(null);
|
|
7750
|
+
const lastDisplayHeightRef = React62.useRef(0);
|
|
7751
|
+
React62.useLayoutEffect(() => {
|
|
7726
7752
|
if (!isSelected && displayRef.current) {
|
|
7727
7753
|
const h = displayRef.current.offsetHeight;
|
|
7728
7754
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -7748,11 +7774,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7748
7774
|
});
|
|
7749
7775
|
}
|
|
7750
7776
|
});
|
|
7751
|
-
|
|
7777
|
+
React62.useLayoutEffect(() => {
|
|
7752
7778
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7753
7779
|
}, [localText, isSelected]);
|
|
7754
7780
|
if (isSelected) {
|
|
7755
|
-
return /* @__PURE__ */
|
|
7781
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
7756
7782
|
"textarea",
|
|
7757
7783
|
{
|
|
7758
7784
|
ref: textareaRef,
|
|
@@ -7770,7 +7796,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7770
7796
|
rows: 1,
|
|
7771
7797
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7772
7798
|
}
|
|
7773
|
-
), /* @__PURE__ */
|
|
7799
|
+
), /* @__PURE__ */ React62__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7774
7800
|
}
|
|
7775
7801
|
const headingProps = isMarkdown ? {
|
|
7776
7802
|
ref: displayRef,
|
|
@@ -7779,11 +7805,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7779
7805
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
7780
7806
|
switch (level) {
|
|
7781
7807
|
case "h1":
|
|
7782
|
-
return /* @__PURE__ */
|
|
7808
|
+
return /* @__PURE__ */ React62__default.default.createElement("h1", __spreadValues({}, headingProps));
|
|
7783
7809
|
case "h2":
|
|
7784
|
-
return /* @__PURE__ */
|
|
7810
|
+
return /* @__PURE__ */ React62__default.default.createElement("h2", __spreadValues({}, headingProps));
|
|
7785
7811
|
case "h3":
|
|
7786
|
-
return /* @__PURE__ */
|
|
7812
|
+
return /* @__PURE__ */ React62__default.default.createElement("h3", __spreadValues({}, headingProps));
|
|
7787
7813
|
}
|
|
7788
7814
|
}
|
|
7789
7815
|
function HtmlEditor({ style, props }) {
|
|
@@ -7792,8 +7818,8 @@ function HtmlEditor({ style, props }) {
|
|
|
7792
7818
|
const selectedBlockId = useSelectedBlockId();
|
|
7793
7819
|
const isSelected = selectedBlockId === blockId;
|
|
7794
7820
|
const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
|
|
7795
|
-
const [localContents, setLocalContents] =
|
|
7796
|
-
|
|
7821
|
+
const [localContents, setLocalContents] = React62.useState(contents);
|
|
7822
|
+
React62.useEffect(() => {
|
|
7797
7823
|
setLocalContents(contents);
|
|
7798
7824
|
}, [contents]);
|
|
7799
7825
|
const cssStyle = {
|
|
@@ -7848,7 +7874,7 @@ function HtmlEditor({ style, props }) {
|
|
|
7848
7874
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7849
7875
|
});
|
|
7850
7876
|
};
|
|
7851
|
-
return /* @__PURE__ */
|
|
7877
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React62__default.default.createElement(
|
|
7852
7878
|
"textarea",
|
|
7853
7879
|
{
|
|
7854
7880
|
value: localContents,
|
|
@@ -7868,9 +7894,9 @@ function HtmlEditor({ style, props }) {
|
|
|
7868
7894
|
));
|
|
7869
7895
|
}
|
|
7870
7896
|
if (!contents) {
|
|
7871
|
-
return /* @__PURE__ */
|
|
7897
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle });
|
|
7872
7898
|
}
|
|
7873
|
-
return /* @__PURE__ */
|
|
7899
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
7874
7900
|
}
|
|
7875
7901
|
function getImageBorderRadius2(shape, size) {
|
|
7876
7902
|
switch (shape) {
|
|
@@ -7903,36 +7929,36 @@ function SignatureEditor({ style, props }) {
|
|
|
7903
7929
|
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
7904
7930
|
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
7905
7931
|
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
|
-
|
|
7932
|
+
const [localGreeting, setLocalGreeting] = React62.useState(greeting);
|
|
7933
|
+
const [localName, setLocalName] = React62.useState(name);
|
|
7934
|
+
const [localTitle, setLocalTitle] = React62.useState(title);
|
|
7935
|
+
const [localCompany, setLocalCompany] = React62.useState(company);
|
|
7936
|
+
const [localAddress, setLocalAddress] = React62.useState(address);
|
|
7937
|
+
const [localEmail, setLocalEmail] = React62.useState(email);
|
|
7938
|
+
const [localPhone, setLocalPhone] = React62.useState(phone);
|
|
7939
|
+
const [localWebsite, setLocalWebsite] = React62.useState(website);
|
|
7940
|
+
React62.useEffect(() => {
|
|
7915
7941
|
setLocalGreeting(greeting);
|
|
7916
7942
|
}, [greeting]);
|
|
7917
|
-
|
|
7943
|
+
React62.useEffect(() => {
|
|
7918
7944
|
setLocalName(name);
|
|
7919
7945
|
}, [name]);
|
|
7920
|
-
|
|
7946
|
+
React62.useEffect(() => {
|
|
7921
7947
|
setLocalTitle(title);
|
|
7922
7948
|
}, [title]);
|
|
7923
|
-
|
|
7949
|
+
React62.useEffect(() => {
|
|
7924
7950
|
setLocalCompany(company);
|
|
7925
7951
|
}, [company]);
|
|
7926
|
-
|
|
7952
|
+
React62.useEffect(() => {
|
|
7927
7953
|
setLocalAddress(address);
|
|
7928
7954
|
}, [address]);
|
|
7929
|
-
|
|
7955
|
+
React62.useEffect(() => {
|
|
7930
7956
|
setLocalEmail(email);
|
|
7931
7957
|
}, [email]);
|
|
7932
|
-
|
|
7958
|
+
React62.useEffect(() => {
|
|
7933
7959
|
setLocalPhone(phone);
|
|
7934
7960
|
}, [phone]);
|
|
7935
|
-
|
|
7961
|
+
React62.useEffect(() => {
|
|
7936
7962
|
setLocalWebsite(website);
|
|
7937
7963
|
}, [website]);
|
|
7938
7964
|
const updateProps = (updates) => {
|
|
@@ -7985,7 +8011,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7985
8011
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
7986
8012
|
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
8013
|
};
|
|
7988
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
8014
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React62__default.default.createElement(
|
|
7989
8015
|
"img",
|
|
7990
8016
|
{
|
|
7991
8017
|
src: imageUrl,
|
|
@@ -8003,7 +8029,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8003
8029
|
}
|
|
8004
8030
|
}
|
|
8005
8031
|
) : null;
|
|
8006
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
8032
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React62__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8007
8033
|
"input",
|
|
8008
8034
|
{
|
|
8009
8035
|
value: localGreeting,
|
|
@@ -8014,8 +8040,8 @@ function SignatureEditor({ style, props }) {
|
|
|
8014
8040
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
8015
8041
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
8016
8042
|
}
|
|
8017
|
-
)) : greeting ? /* @__PURE__ */
|
|
8018
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
8043
|
+
)) : greeting ? /* @__PURE__ */ React62__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
8044
|
+
const textContent = isSelected ? /* @__PURE__ */ React62__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8019
8045
|
"input",
|
|
8020
8046
|
{
|
|
8021
8047
|
value: localName,
|
|
@@ -8026,7 +8052,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8026
8052
|
placeholder: "Name",
|
|
8027
8053
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
8028
8054
|
}
|
|
8029
|
-
), /* @__PURE__ */
|
|
8055
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8030
8056
|
"input",
|
|
8031
8057
|
{
|
|
8032
8058
|
value: localTitle,
|
|
@@ -8037,7 +8063,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8037
8063
|
placeholder: "Title",
|
|
8038
8064
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8039
8065
|
}
|
|
8040
|
-
), /* @__PURE__ */
|
|
8066
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8041
8067
|
"input",
|
|
8042
8068
|
{
|
|
8043
8069
|
value: localCompany,
|
|
@@ -8048,7 +8074,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8048
8074
|
placeholder: "Company",
|
|
8049
8075
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8050
8076
|
}
|
|
8051
|
-
), /* @__PURE__ */
|
|
8077
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8052
8078
|
"input",
|
|
8053
8079
|
{
|
|
8054
8080
|
value: localAddress,
|
|
@@ -8059,7 +8085,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8059
8085
|
placeholder: "Address",
|
|
8060
8086
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8061
8087
|
}
|
|
8062
|
-
), /* @__PURE__ */
|
|
8088
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8063
8089
|
"input",
|
|
8064
8090
|
{
|
|
8065
8091
|
value: localEmail,
|
|
@@ -8070,7 +8096,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8070
8096
|
placeholder: "Email",
|
|
8071
8097
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
8072
8098
|
}
|
|
8073
|
-
), /* @__PURE__ */
|
|
8099
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8074
8100
|
"input",
|
|
8075
8101
|
{
|
|
8076
8102
|
value: localPhone,
|
|
@@ -8081,7 +8107,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8081
8107
|
placeholder: "Phone",
|
|
8082
8108
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
8083
8109
|
}
|
|
8084
|
-
), /* @__PURE__ */
|
|
8110
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8085
8111
|
"input",
|
|
8086
8112
|
{
|
|
8087
8113
|
value: localWebsite,
|
|
@@ -8092,11 +8118,11 @@ function SignatureEditor({ style, props }) {
|
|
|
8092
8118
|
placeholder: "Website",
|
|
8093
8119
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
8094
8120
|
}
|
|
8095
|
-
)) : /* @__PURE__ */
|
|
8121
|
+
)) : /* @__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
8122
|
if (layout === "vertical") {
|
|
8097
|
-
return /* @__PURE__ */
|
|
8123
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React62__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
8098
8124
|
}
|
|
8099
|
-
return /* @__PURE__ */
|
|
8125
|
+
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
8126
|
}
|
|
8101
8127
|
function getFontFamily10(fontFamily) {
|
|
8102
8128
|
switch (fontFamily) {
|
|
@@ -8156,11 +8182,11 @@ function TextEditor({ style, props }) {
|
|
|
8156
8182
|
const document2 = useDocument();
|
|
8157
8183
|
const isSelected = selectedBlockId === blockId;
|
|
8158
8184
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
8159
|
-
const [localText, setLocalText] =
|
|
8185
|
+
const [localText, setLocalText] = React62.useState(textContent);
|
|
8160
8186
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
8161
8187
|
const rootBlock = document2.root;
|
|
8162
8188
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
8163
|
-
|
|
8189
|
+
React62.useEffect(() => {
|
|
8164
8190
|
setLocalText(textContent);
|
|
8165
8191
|
}, [textContent]);
|
|
8166
8192
|
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -8208,9 +8234,9 @@ function TextEditor({ style, props }) {
|
|
|
8208
8234
|
const handleTextChange = (e) => {
|
|
8209
8235
|
commitText(e.target.value);
|
|
8210
8236
|
};
|
|
8211
|
-
const displayRef =
|
|
8212
|
-
const lastDisplayHeightRef =
|
|
8213
|
-
|
|
8237
|
+
const displayRef = React62.useRef(null);
|
|
8238
|
+
const lastDisplayHeightRef = React62.useRef(0);
|
|
8239
|
+
React62.useLayoutEffect(() => {
|
|
8214
8240
|
if (!isSelected && displayRef.current) {
|
|
8215
8241
|
const h = displayRef.current.offsetHeight;
|
|
8216
8242
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -8236,11 +8262,11 @@ function TextEditor({ style, props }) {
|
|
|
8236
8262
|
});
|
|
8237
8263
|
}
|
|
8238
8264
|
});
|
|
8239
|
-
|
|
8265
|
+
React62.useLayoutEffect(() => {
|
|
8240
8266
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
8241
8267
|
}, [localText, isSelected]);
|
|
8242
8268
|
if (isSelected) {
|
|
8243
|
-
return /* @__PURE__ */
|
|
8269
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
8244
8270
|
"textarea",
|
|
8245
8271
|
{
|
|
8246
8272
|
ref: textareaRef,
|
|
@@ -8258,10 +8284,10 @@ function TextEditor({ style, props }) {
|
|
|
8258
8284
|
rows: 1,
|
|
8259
8285
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
8260
8286
|
}
|
|
8261
|
-
), /* @__PURE__ */
|
|
8287
|
+
), /* @__PURE__ */ React62__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
8262
8288
|
}
|
|
8263
8289
|
if (isMarkdown) {
|
|
8264
|
-
return /* @__PURE__ */
|
|
8290
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8265
8291
|
"div",
|
|
8266
8292
|
{
|
|
8267
8293
|
ref: displayRef,
|
|
@@ -8270,34 +8296,34 @@ function TextEditor({ style, props }) {
|
|
|
8270
8296
|
}
|
|
8271
8297
|
);
|
|
8272
8298
|
}
|
|
8273
|
-
return /* @__PURE__ */
|
|
8299
|
+
return /* @__PURE__ */ React62__default.default.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
8274
8300
|
}
|
|
8275
8301
|
|
|
8276
8302
|
// src/editor/core.tsx
|
|
8277
8303
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
8278
8304
|
Avatar: {
|
|
8279
8305
|
schema: AvatarPropsSchema,
|
|
8280
|
-
Component: (props) => /* @__PURE__ */
|
|
8306
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
8281
8307
|
},
|
|
8282
8308
|
Button: {
|
|
8283
8309
|
schema: ButtonPropsSchema,
|
|
8284
|
-
Component: (props) => /* @__PURE__ */
|
|
8310
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
8285
8311
|
},
|
|
8286
8312
|
Container: {
|
|
8287
8313
|
schema: container_props_schema_default,
|
|
8288
|
-
Component: (props) => /* @__PURE__ */
|
|
8314
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
8289
8315
|
},
|
|
8290
8316
|
ColumnsContainer: {
|
|
8291
8317
|
schema: columns_container_props_schema_default2,
|
|
8292
|
-
Component: (props) => /* @__PURE__ */
|
|
8318
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
8293
8319
|
},
|
|
8294
8320
|
Heading: {
|
|
8295
8321
|
schema: HeadingPropsSchema,
|
|
8296
|
-
Component: (props) => /* @__PURE__ */
|
|
8322
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
8297
8323
|
},
|
|
8298
8324
|
Html: {
|
|
8299
8325
|
schema: HtmlPropsSchema,
|
|
8300
|
-
Component: (props) => /* @__PURE__ */
|
|
8326
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
8301
8327
|
},
|
|
8302
8328
|
Image: {
|
|
8303
8329
|
schema: ImagePropsSchema,
|
|
@@ -8309,28 +8335,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
8309
8335
|
linkHref: null
|
|
8310
8336
|
})
|
|
8311
8337
|
});
|
|
8312
|
-
return /* @__PURE__ */
|
|
8338
|
+
return /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
8313
8339
|
}
|
|
8314
8340
|
},
|
|
8315
8341
|
Text: {
|
|
8316
8342
|
schema: TextPropsSchema,
|
|
8317
|
-
Component: (props) => /* @__PURE__ */
|
|
8343
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
8318
8344
|
},
|
|
8319
8345
|
EmailLayout: {
|
|
8320
8346
|
schema: email_layout_props_schema_default,
|
|
8321
|
-
Component: (p) => /* @__PURE__ */
|
|
8347
|
+
Component: (p) => /* @__PURE__ */ React62__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
8322
8348
|
},
|
|
8323
8349
|
Spacer: {
|
|
8324
8350
|
schema: SpacerPropsSchema,
|
|
8325
|
-
Component: (props) => /* @__PURE__ */
|
|
8351
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
8326
8352
|
},
|
|
8327
8353
|
Divider: {
|
|
8328
8354
|
schema: DividerPropsSchema,
|
|
8329
|
-
Component: (props) => /* @__PURE__ */
|
|
8355
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
8330
8356
|
},
|
|
8331
8357
|
Signature: {
|
|
8332
8358
|
schema: SignaturePropsSchema,
|
|
8333
|
-
Component: (props) => /* @__PURE__ */
|
|
8359
|
+
Component: (props) => /* @__PURE__ */ React62__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
8334
8360
|
}
|
|
8335
8361
|
});
|
|
8336
8362
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -8338,15 +8364,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
8338
8364
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
8339
8365
|
|
|
8340
8366
|
// src/editor/editor-block.tsx
|
|
8341
|
-
var EditorBlockContext =
|
|
8342
|
-
var useCurrentBlockId = () =>
|
|
8367
|
+
var EditorBlockContext = React62.createContext(null);
|
|
8368
|
+
var useCurrentBlockId = () => React62.useContext(EditorBlockContext);
|
|
8343
8369
|
function EditorBlock({ id }) {
|
|
8344
8370
|
const document2 = useDocument();
|
|
8345
8371
|
const block = document2[id];
|
|
8346
8372
|
if (!block) {
|
|
8347
8373
|
throw new Error("Could not find block");
|
|
8348
8374
|
}
|
|
8349
|
-
return /* @__PURE__ */
|
|
8375
|
+
return /* @__PURE__ */ React62__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React62__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
8350
8376
|
}
|
|
8351
8377
|
function ToggleInspectorPanelButton() {
|
|
8352
8378
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -8354,20 +8380,20 @@ function ToggleInspectorPanelButton() {
|
|
|
8354
8380
|
toggleInspectorDrawerOpen();
|
|
8355
8381
|
};
|
|
8356
8382
|
if (inspectorDrawerOpen) {
|
|
8357
|
-
return /* @__PURE__ */
|
|
8383
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
8358
8384
|
}
|
|
8359
|
-
return /* @__PURE__ */
|
|
8385
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
8360
8386
|
}
|
|
8361
8387
|
function useIcon() {
|
|
8362
8388
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8363
8389
|
if (samplesDrawerOpen) {
|
|
8364
|
-
return /* @__PURE__ */
|
|
8390
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
8365
8391
|
}
|
|
8366
|
-
return /* @__PURE__ */
|
|
8392
|
+
return /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
8367
8393
|
}
|
|
8368
8394
|
function ToggleSamplesPanelButton() {
|
|
8369
8395
|
const icon = useIcon();
|
|
8370
|
-
return /* @__PURE__ */
|
|
8396
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
8371
8397
|
}
|
|
8372
8398
|
function formatHtml(html2, spaces = 2) {
|
|
8373
8399
|
try {
|
|
@@ -8415,8 +8441,8 @@ function json(value) {
|
|
|
8415
8441
|
|
|
8416
8442
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
8417
8443
|
function HighlightedCodePanel({ type, value }) {
|
|
8418
|
-
const [code, setCode] =
|
|
8419
|
-
|
|
8444
|
+
const [code, setCode] = React62.useState(null);
|
|
8445
|
+
React62.useEffect(() => {
|
|
8420
8446
|
switch (type) {
|
|
8421
8447
|
case "html":
|
|
8422
8448
|
html(value).then(setCode);
|
|
@@ -8429,7 +8455,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8429
8455
|
if (code === null) {
|
|
8430
8456
|
return null;
|
|
8431
8457
|
}
|
|
8432
|
-
return /* @__PURE__ */
|
|
8458
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8433
8459
|
"pre",
|
|
8434
8460
|
{
|
|
8435
8461
|
style: {
|
|
@@ -8454,18 +8480,18 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8454
8480
|
// src/app/email-canvas/html-panel.tsx
|
|
8455
8481
|
function HtmlPanel() {
|
|
8456
8482
|
const document2 = useDocument();
|
|
8457
|
-
const code =
|
|
8458
|
-
return /* @__PURE__ */
|
|
8483
|
+
const code = React62.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
8484
|
+
return /* @__PURE__ */ React62__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
8459
8485
|
}
|
|
8460
8486
|
function JsonPanel() {
|
|
8461
8487
|
const document2 = useDocument();
|
|
8462
|
-
const code =
|
|
8463
|
-
return /* @__PURE__ */
|
|
8488
|
+
const code = React62.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
8489
|
+
return /* @__PURE__ */ React62__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
8464
8490
|
}
|
|
8465
8491
|
function TextPanel() {
|
|
8466
8492
|
const document2 = useDocument();
|
|
8467
|
-
const text =
|
|
8468
|
-
return /* @__PURE__ */
|
|
8493
|
+
const text = React62.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
8494
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8469
8495
|
"pre",
|
|
8470
8496
|
{
|
|
8471
8497
|
style: {
|
|
@@ -8501,35 +8527,35 @@ function MainTabsGroup() {
|
|
|
8501
8527
|
setSelectedMainTab("editor");
|
|
8502
8528
|
}
|
|
8503
8529
|
};
|
|
8504
|
-
return /* @__PURE__ */
|
|
8530
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8505
8531
|
material.Tab,
|
|
8506
8532
|
{
|
|
8507
8533
|
value: "editor",
|
|
8508
|
-
label: /* @__PURE__ */
|
|
8534
|
+
label: /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tab.edit", "Edit") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
8509
8535
|
}
|
|
8510
|
-
), /* @__PURE__ */
|
|
8536
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8511
8537
|
material.Tab,
|
|
8512
8538
|
{
|
|
8513
8539
|
value: "preview",
|
|
8514
|
-
label: /* @__PURE__ */
|
|
8540
|
+
label: /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("tab.preview", "Preview") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
8515
8541
|
}
|
|
8516
|
-
), /* @__PURE__ */
|
|
8542
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8517
8543
|
material.Tab,
|
|
8518
8544
|
{
|
|
8519
8545
|
value: "html",
|
|
8520
|
-
label: /* @__PURE__ */
|
|
8546
|
+
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
8547
|
}
|
|
8522
|
-
), /* @__PURE__ */
|
|
8548
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8523
8549
|
material.Tab,
|
|
8524
8550
|
{
|
|
8525
8551
|
value: "text",
|
|
8526
|
-
label: /* @__PURE__ */
|
|
8552
|
+
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
8553
|
}
|
|
8528
|
-
), /* @__PURE__ */
|
|
8554
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8529
8555
|
material.Tab,
|
|
8530
8556
|
{
|
|
8531
8557
|
value: "json",
|
|
8532
|
-
label: /* @__PURE__ */
|
|
8558
|
+
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
8559
|
}
|
|
8534
8560
|
));
|
|
8535
8561
|
}
|
|
@@ -8544,8 +8570,8 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8544
8570
|
} = useEmailEditor();
|
|
8545
8571
|
const { showMessage } = useSnackbar();
|
|
8546
8572
|
const document2 = useDocument();
|
|
8547
|
-
const [dialogMode, setDialogMode] =
|
|
8548
|
-
const [nameError, setNameError] =
|
|
8573
|
+
const [dialogMode, setDialogMode] = React62.useState(null);
|
|
8574
|
+
const [nameError, setNameError] = React62.useState(null);
|
|
8549
8575
|
const hasOpenRow = Boolean(currentTemplateId);
|
|
8550
8576
|
const isSample = currentTemplateKind === "sample";
|
|
8551
8577
|
const primaryLabel = hasOpenRow ? t("savebar.save", "Save") : t("savebar.save-as-new", "Save as new\u2026");
|
|
@@ -8584,7 +8610,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8584
8610
|
return false;
|
|
8585
8611
|
}
|
|
8586
8612
|
});
|
|
8587
|
-
return /* @__PURE__ */
|
|
8613
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
8588
8614
|
material.Box,
|
|
8589
8615
|
{
|
|
8590
8616
|
sx: {
|
|
@@ -8597,7 +8623,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8597
8623
|
pb: 3
|
|
8598
8624
|
}
|
|
8599
8625
|
},
|
|
8600
|
-
/* @__PURE__ */
|
|
8626
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
8601
8627
|
material.Box,
|
|
8602
8628
|
{
|
|
8603
8629
|
sx: {
|
|
@@ -8612,7 +8638,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8612
8638
|
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
8613
8639
|
}
|
|
8614
8640
|
},
|
|
8615
|
-
hasOpenRow && currentTemplateName && /* @__PURE__ */
|
|
8641
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React62__default.default.createElement(
|
|
8616
8642
|
material.Box,
|
|
8617
8643
|
{
|
|
8618
8644
|
sx: {
|
|
@@ -8628,25 +8654,25 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8628
8654
|
title: currentTemplateName
|
|
8629
8655
|
},
|
|
8630
8656
|
isSample ? `${t("savebar.sample-prefix", "Sample")} \xB7 ` : "",
|
|
8631
|
-
/* @__PURE__ */
|
|
8657
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8632
8658
|
),
|
|
8633
|
-
/* @__PURE__ */
|
|
8659
|
+
/* @__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
8660
|
material.Button,
|
|
8635
8661
|
{
|
|
8636
8662
|
variant: "contained",
|
|
8637
8663
|
size: "large",
|
|
8638
|
-
startIcon: /* @__PURE__ */
|
|
8664
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SaveOutlined, null),
|
|
8639
8665
|
onClick: handlePrimary,
|
|
8640
8666
|
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8641
8667
|
},
|
|
8642
8668
|
primaryLabel
|
|
8643
8669
|
)),
|
|
8644
|
-
hasOpenRow && saveAs && /* @__PURE__ */
|
|
8670
|
+
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
8671
|
material.Button,
|
|
8646
8672
|
{
|
|
8647
8673
|
variant: "outlined",
|
|
8648
8674
|
size: "large",
|
|
8649
|
-
startIcon: /* @__PURE__ */
|
|
8675
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.SaveAsOutlined, null),
|
|
8650
8676
|
onClick: () => {
|
|
8651
8677
|
setNameError(null);
|
|
8652
8678
|
setDialogMode("save-as");
|
|
@@ -8655,12 +8681,12 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8655
8681
|
},
|
|
8656
8682
|
t("savebar.save-as", "Save as\u2026")
|
|
8657
8683
|
)),
|
|
8658
|
-
saveAs && /* @__PURE__ */
|
|
8684
|
+
saveAs && /* @__PURE__ */ React62__default.default.createElement(material.Tooltip, { title: t("savebar.start-fresh", "Start a fresh template") }, /* @__PURE__ */ React62__default.default.createElement(
|
|
8659
8685
|
material.Button,
|
|
8660
8686
|
{
|
|
8661
8687
|
variant: "text",
|
|
8662
8688
|
size: "large",
|
|
8663
|
-
startIcon: /* @__PURE__ */
|
|
8689
|
+
startIcon: /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
8664
8690
|
onClick: () => {
|
|
8665
8691
|
setNameError(null);
|
|
8666
8692
|
setDialogMode("new-blank");
|
|
@@ -8670,7 +8696,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8670
8696
|
t("savebar.new", "New")
|
|
8671
8697
|
))
|
|
8672
8698
|
)
|
|
8673
|
-
), /* @__PURE__ */
|
|
8699
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
8674
8700
|
SaveTemplateDialog,
|
|
8675
8701
|
{
|
|
8676
8702
|
open: dialogMode !== null,
|
|
@@ -8707,7 +8733,7 @@ function UndoRedoButtons() {
|
|
|
8707
8733
|
const modKey = mac ? "\u2318" : "Ctrl";
|
|
8708
8734
|
const undoHint = `${modKey}+Z`;
|
|
8709
8735
|
const redoHint = mac ? `${modKey}+\u21E7+Z` : `${modKey}+Shift+Z / ${modKey}+Y`;
|
|
8710
|
-
|
|
8736
|
+
React62.useEffect(() => {
|
|
8711
8737
|
const onKeyDown = (e) => {
|
|
8712
8738
|
const mod = mac ? e.metaKey : e.ctrlKey;
|
|
8713
8739
|
if (!mod) return;
|
|
@@ -8724,7 +8750,7 @@ function UndoRedoButtons() {
|
|
|
8724
8750
|
window.addEventListener("keydown", onKeyDown);
|
|
8725
8751
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
8726
8752
|
}, [mac]);
|
|
8727
|
-
return /* @__PURE__ */
|
|
8753
|
+
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
8754
|
material.IconButton,
|
|
8729
8755
|
{
|
|
8730
8756
|
size: "small",
|
|
@@ -8732,8 +8758,8 @@ function UndoRedoButtons() {
|
|
|
8732
8758
|
disabled: !canUndo,
|
|
8733
8759
|
"aria-label": t("undo.label", "Undo")
|
|
8734
8760
|
},
|
|
8735
|
-
/* @__PURE__ */
|
|
8736
|
-
))), /* @__PURE__ */
|
|
8761
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.UndoOutlined, { fontSize: "small" })
|
|
8762
|
+
))), /* @__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
8763
|
material.IconButton,
|
|
8738
8764
|
{
|
|
8739
8765
|
size: "small",
|
|
@@ -8741,7 +8767,7 @@ function UndoRedoButtons() {
|
|
|
8741
8767
|
disabled: !canRedo,
|
|
8742
8768
|
"aria-label": t("redo.label", "Redo")
|
|
8743
8769
|
},
|
|
8744
|
-
/* @__PURE__ */
|
|
8770
|
+
/* @__PURE__ */ React62__default.default.createElement(iconsMaterial.RedoOutlined, { fontSize: "small" })
|
|
8745
8771
|
))));
|
|
8746
8772
|
}
|
|
8747
8773
|
function SubjectInput() {
|
|
@@ -8767,7 +8793,7 @@ function SubjectInput() {
|
|
|
8767
8793
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
8768
8794
|
});
|
|
8769
8795
|
};
|
|
8770
|
-
return /* @__PURE__ */
|
|
8796
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8771
8797
|
material.Box,
|
|
8772
8798
|
{
|
|
8773
8799
|
sx: {
|
|
@@ -8784,8 +8810,8 @@ function SubjectInput() {
|
|
|
8784
8810
|
gap: 1.5
|
|
8785
8811
|
}
|
|
8786
8812
|
},
|
|
8787
|
-
/* @__PURE__ */
|
|
8788
|
-
/* @__PURE__ */
|
|
8813
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8814
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
8789
8815
|
material.InputBase,
|
|
8790
8816
|
{
|
|
8791
8817
|
fullWidth: true,
|
|
@@ -8811,7 +8837,7 @@ function SubjectPreview() {
|
|
|
8811
8837
|
if (!subject) return null;
|
|
8812
8838
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
8813
8839
|
const rendered = substituteSampleValues(subject, samples);
|
|
8814
|
-
return /* @__PURE__ */
|
|
8840
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8815
8841
|
material.Box,
|
|
8816
8842
|
{
|
|
8817
8843
|
sx: {
|
|
@@ -8828,8 +8854,8 @@ function SubjectPreview() {
|
|
|
8828
8854
|
gap: 1.5
|
|
8829
8855
|
}
|
|
8830
8856
|
},
|
|
8831
|
-
/* @__PURE__ */
|
|
8832
|
-
/* @__PURE__ */
|
|
8857
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8858
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { fontSize: 14 } }, rendered)
|
|
8833
8859
|
);
|
|
8834
8860
|
}
|
|
8835
8861
|
function generateId3() {
|
|
@@ -8876,12 +8902,12 @@ function findImageFile(items) {
|
|
|
8876
8902
|
}
|
|
8877
8903
|
function ImageDropPasteHandler({ enabled, children }) {
|
|
8878
8904
|
const { uploadImage } = useImageCallbacks();
|
|
8879
|
-
const wrapperRef =
|
|
8880
|
-
const dragDepth =
|
|
8881
|
-
const [dragging, setDragging] =
|
|
8882
|
-
const [uploading, setUploading] =
|
|
8905
|
+
const wrapperRef = React62.useRef(null);
|
|
8906
|
+
const dragDepth = React62.useRef(0);
|
|
8907
|
+
const [dragging, setDragging] = React62.useState(false);
|
|
8908
|
+
const [uploading, setUploading] = React62.useState(false);
|
|
8883
8909
|
const active = enabled && Boolean(uploadImage);
|
|
8884
|
-
|
|
8910
|
+
React62.useEffect(() => {
|
|
8885
8911
|
if (!active || !uploadImage) return;
|
|
8886
8912
|
const handlePaste = (e) => __async(null, null, function* () {
|
|
8887
8913
|
var _a;
|
|
@@ -8902,7 +8928,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8902
8928
|
window.addEventListener("paste", handlePaste);
|
|
8903
8929
|
return () => window.removeEventListener("paste", handlePaste);
|
|
8904
8930
|
}, [active, uploadImage]);
|
|
8905
|
-
if (!active) return /* @__PURE__ */
|
|
8931
|
+
if (!active) return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, children);
|
|
8906
8932
|
const onDragEnter = (e) => {
|
|
8907
8933
|
var _a, _b;
|
|
8908
8934
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -8935,7 +8961,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8935
8961
|
setUploading(false);
|
|
8936
8962
|
}
|
|
8937
8963
|
});
|
|
8938
|
-
return /* @__PURE__ */
|
|
8964
|
+
return /* @__PURE__ */ React62__default.default.createElement(
|
|
8939
8965
|
material.Box,
|
|
8940
8966
|
{
|
|
8941
8967
|
ref: wrapperRef,
|
|
@@ -8946,7 +8972,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8946
8972
|
sx: { position: "relative" }
|
|
8947
8973
|
},
|
|
8948
8974
|
children,
|
|
8949
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
8975
|
+
(dragging || uploading) && /* @__PURE__ */ React62__default.default.createElement(
|
|
8950
8976
|
material.Box,
|
|
8951
8977
|
{
|
|
8952
8978
|
sx: {
|
|
@@ -8965,7 +8991,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8965
8991
|
zIndex: 10
|
|
8966
8992
|
}
|
|
8967
8993
|
},
|
|
8968
|
-
/* @__PURE__ */
|
|
8994
|
+
/* @__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
8995
|
)
|
|
8970
8996
|
);
|
|
8971
8997
|
}
|
|
@@ -9005,7 +9031,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9005
9031
|
var _a;
|
|
9006
9032
|
switch (selectedMainTab) {
|
|
9007
9033
|
case "editor":
|
|
9008
|
-
return /* @__PURE__ */
|
|
9034
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React62__default.default.createElement(EditorBlock, { id: "root" }));
|
|
9009
9035
|
case "preview": {
|
|
9010
9036
|
const rootBlock = document2.root;
|
|
9011
9037
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -9013,18 +9039,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9013
9039
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
9014
9040
|
);
|
|
9015
9041
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
9016
|
-
return /* @__PURE__ */
|
|
9042
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React62__default.default.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
9017
9043
|
}
|
|
9018
9044
|
case "html":
|
|
9019
|
-
return /* @__PURE__ */
|
|
9045
|
+
return /* @__PURE__ */ React62__default.default.createElement(HtmlPanel, null);
|
|
9020
9046
|
case "text":
|
|
9021
|
-
return /* @__PURE__ */
|
|
9047
|
+
return /* @__PURE__ */ React62__default.default.createElement(TextPanel, null);
|
|
9022
9048
|
case "json":
|
|
9023
|
-
return /* @__PURE__ */
|
|
9049
|
+
return /* @__PURE__ */ React62__default.default.createElement(JsonPanel, null);
|
|
9024
9050
|
}
|
|
9025
9051
|
};
|
|
9026
9052
|
const showSaveButtons = persistenceEnabled;
|
|
9027
|
-
return /* @__PURE__ */
|
|
9053
|
+
return /* @__PURE__ */ React62__default.default.createElement(React62__default.default.Fragment, null, /* @__PURE__ */ React62__default.default.createElement(
|
|
9028
9054
|
material.Stack,
|
|
9029
9055
|
{
|
|
9030
9056
|
sx: {
|
|
@@ -9041,10 +9067,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9041
9067
|
justifyContent: "space-between",
|
|
9042
9068
|
alignItems: "center"
|
|
9043
9069
|
},
|
|
9044
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
9045
|
-
/* @__PURE__ */
|
|
9046
|
-
/* @__PURE__ */
|
|
9047
|
-
), selectedMainTab === "editor" && /* @__PURE__ */
|
|
9070
|
+
samplesDrawerEnabled && /* @__PURE__ */ React62__default.default.createElement(ToggleSamplesPanelButton, null),
|
|
9071
|
+
/* @__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" })))))),
|
|
9072
|
+
/* @__PURE__ */ React62__default.default.createElement(ToggleInspectorPanelButton, null)
|
|
9073
|
+
), 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
9074
|
material.Box,
|
|
9049
9075
|
{
|
|
9050
9076
|
sx: {
|
|
@@ -9060,8 +9086,8 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9060
9086
|
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
9061
9087
|
}
|
|
9062
9088
|
},
|
|
9063
|
-
/* @__PURE__ */
|
|
9064
|
-
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */
|
|
9089
|
+
/* @__PURE__ */ React62__default.default.createElement(material.Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
|
|
9090
|
+
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React62__default.default.createElement(SaveBar, { loadTemplates, saveAs })
|
|
9065
9091
|
)));
|
|
9066
9092
|
}
|
|
9067
9093
|
|
|
@@ -9098,7 +9124,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
9098
9124
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
9099
9125
|
});
|
|
9100
9126
|
}
|
|
9101
|
-
var EmailEditorInternal =
|
|
9127
|
+
var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
9102
9128
|
const {
|
|
9103
9129
|
drawerEnterDuration = 225,
|
|
9104
9130
|
drawerExitDuration = 225,
|
|
@@ -9120,10 +9146,10 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9120
9146
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
9121
9147
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
9122
9148
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
9123
|
-
const onChangeRef =
|
|
9149
|
+
const onChangeRef = React62.useRef(onChange);
|
|
9124
9150
|
onChangeRef.current = onChange;
|
|
9125
|
-
const prevDocJsonRef =
|
|
9126
|
-
|
|
9151
|
+
const prevDocJsonRef = React62.useRef("");
|
|
9152
|
+
React62.useEffect(() => {
|
|
9127
9153
|
var _a;
|
|
9128
9154
|
const docJson = JSON.stringify(currentDocument);
|
|
9129
9155
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -9131,7 +9157,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9131
9157
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
9132
9158
|
}
|
|
9133
9159
|
}, [currentDocument]);
|
|
9134
|
-
|
|
9160
|
+
React62.useImperativeHandle(ref, () => ({
|
|
9135
9161
|
saveTemplate: () => {
|
|
9136
9162
|
return saveTemplate();
|
|
9137
9163
|
},
|
|
@@ -9143,7 +9169,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9143
9169
|
return getDocument();
|
|
9144
9170
|
}
|
|
9145
9171
|
}));
|
|
9146
|
-
return /* @__PURE__ */
|
|
9172
|
+
return /* @__PURE__ */ React62__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React62__default.default.createElement(
|
|
9147
9173
|
InspectorDrawer,
|
|
9148
9174
|
{
|
|
9149
9175
|
enterDuration: drawerEnterDuration,
|
|
@@ -9152,7 +9178,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9152
9178
|
copyTemplate,
|
|
9153
9179
|
renameTemplate
|
|
9154
9180
|
}
|
|
9155
|
-
), /* @__PURE__ */
|
|
9181
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
9156
9182
|
SamplesDrawer,
|
|
9157
9183
|
{
|
|
9158
9184
|
enterDuration: drawerEnterDuration,
|
|
@@ -9168,7 +9194,7 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9168
9194
|
setTemplateKind,
|
|
9169
9195
|
saveAs
|
|
9170
9196
|
}
|
|
9171
|
-
), /* @__PURE__ */
|
|
9197
|
+
), /* @__PURE__ */ React62__default.default.createElement(
|
|
9172
9198
|
material.Stack,
|
|
9173
9199
|
{
|
|
9174
9200
|
sx: {
|
|
@@ -9177,10 +9203,10 @@ var EmailEditorInternal = React57.forwardRef((props, ref) => {
|
|
|
9177
9203
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
9178
9204
|
}
|
|
9179
9205
|
},
|
|
9180
|
-
/* @__PURE__ */
|
|
9206
|
+
/* @__PURE__ */ React62__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
9181
9207
|
));
|
|
9182
9208
|
});
|
|
9183
|
-
var EmailEditor =
|
|
9209
|
+
var EmailEditor = React62.forwardRef((props, ref) => {
|
|
9184
9210
|
const {
|
|
9185
9211
|
initialTemplate: initialTemplateProp,
|
|
9186
9212
|
initialTemplateId,
|
|
@@ -9207,23 +9233,23 @@ var EmailEditor = React57.forwardRef((props, ref) => {
|
|
|
9207
9233
|
locale
|
|
9208
9234
|
} = props;
|
|
9209
9235
|
activateLocale(locale);
|
|
9210
|
-
const resolvedTemplate =
|
|
9236
|
+
const resolvedTemplate = React62.useMemo(
|
|
9211
9237
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
9212
9238
|
[initialTemplateProp]
|
|
9213
9239
|
);
|
|
9214
|
-
const prevTemplateRef =
|
|
9240
|
+
const prevTemplateRef = React62.useRef(void 0);
|
|
9215
9241
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
9216
9242
|
prevTemplateRef.current = resolvedTemplate;
|
|
9217
9243
|
resetDocument(resolvedTemplate);
|
|
9218
9244
|
}
|
|
9219
|
-
|
|
9245
|
+
React62.useEffect(() => {
|
|
9220
9246
|
setPersistenceEnabled(persistenceEnabled);
|
|
9221
9247
|
}, [persistenceEnabled]);
|
|
9222
|
-
const imageCallbacks =
|
|
9248
|
+
const imageCallbacks = React62.useMemo(
|
|
9223
9249
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
9224
9250
|
[uploadImage, loadImages, deleteImage]
|
|
9225
9251
|
);
|
|
9226
|
-
return /* @__PURE__ */
|
|
9252
|
+
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
9253
|
EmailEditorProvider,
|
|
9228
9254
|
{
|
|
9229
9255
|
initialTemplate: resolvedTemplate,
|
|
@@ -9232,7 +9258,7 @@ var EmailEditor = React57.forwardRef((props, ref) => {
|
|
|
9232
9258
|
onSave,
|
|
9233
9259
|
onChange
|
|
9234
9260
|
},
|
|
9235
|
-
/* @__PURE__ */
|
|
9261
|
+
/* @__PURE__ */ React62__default.default.createElement(
|
|
9236
9262
|
EmailEditorInternal,
|
|
9237
9263
|
{
|
|
9238
9264
|
ref,
|