@kontakto/email-template-editor 2.3.1 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +966 -765
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +14 -3
- package/dist/index.d.ts +14 -3
- package/dist/index.js +772 -572
- package/dist/index.js.map +1 -1
- package/package.json +9 -3
package/dist/index.js
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import DOMPurify from 'dompurify';
|
|
2
2
|
import { marked, Renderer } from 'marked';
|
|
3
|
-
import
|
|
3
|
+
import React57, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, useLayoutEffect, Fragment } from 'react';
|
|
4
4
|
import { z } from 'zod';
|
|
5
5
|
import { renderToStaticMarkup as renderToStaticMarkup$1 } from 'react-dom/server';
|
|
6
6
|
import Handlebars from 'handlebars';
|
|
7
7
|
import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
|
|
8
|
+
import { I18nProvider, Trans } from '@lingui/react';
|
|
8
9
|
import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, Tooltip, IconButton, TextField, InputAdornment, Chip, CircularProgress, Alert, ToggleButtonGroup, ToggleButton, Snackbar, Menu, ListItemIcon, ListItemText, Divider as Divider$1, Dialog, DialogTitle, DialogContent, Button as Button$1, DialogActions, List, ListItemButton, InputBase, AlertTitle, FormControlLabel, Switch, InputLabel, Slider, ButtonBase, Popper, Paper, Fade } from '@mui/material';
|
|
10
|
+
import { i18n } from '@lingui/core';
|
|
9
11
|
import { create } from 'zustand';
|
|
10
|
-
import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, MoreVertOutlined, DriveFileRenameOutlineOutlined, ContentCopyOutlined, LibraryAddOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, InsertDriveFileOutlined, DescriptionOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, SaveOutlined, SaveAsOutlined, ViewColumnSharp, ExpandMore, ChevronRight, KeyboardArrowUp, KeyboardArrowDown, FirstPageOutlined, MenuOutlined, GridOnOutlined, SquareOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, BusinessOutlined, ViewColumnOutlined, HtmlOutlined, Crop32Outlined, HorizontalRuleOutlined, ContactMailOutlined, AccountCircleOutlined, ImageOutlined, SmartButtonOutlined, NotesOutlined, HMobiledataOutlined, DashboardOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
|
|
12
|
+
import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, MoreVertOutlined, DriveFileRenameOutlineOutlined, ContentCopyOutlined, LibraryAddOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, InsertDriveFileOutlined, DescriptionOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, SaveOutlined, SaveAsOutlined, ViewColumnSharp, ExpandMore, ChevronRight, KeyboardArrowUp, KeyboardArrowDown, FirstPageOutlined, MenuOutlined, GridOnOutlined, SquareOutlined, CheckOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, BusinessOutlined, ViewColumnOutlined, HtmlOutlined, Crop32Outlined, HorizontalRuleOutlined, ContactMailOutlined, AccountCircleOutlined, ImageOutlined, SmartButtonOutlined, NotesOutlined, HMobiledataOutlined, DashboardOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
|
|
11
13
|
import { HexColorPicker, HexColorInput } from 'react-colorful';
|
|
12
14
|
import hljs from 'highlight.js';
|
|
13
15
|
import jsonHighlighter from 'highlight.js/lib/languages/json';
|
|
@@ -181,7 +183,7 @@ function renderInlineMarkdownString(str) {
|
|
|
181
183
|
function EmailMarkdown(_a) {
|
|
182
184
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
183
185
|
const data = useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
184
|
-
return /* @__PURE__ */
|
|
186
|
+
return /* @__PURE__ */ React57.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
185
187
|
}
|
|
186
188
|
var FONT_FAMILY_SCHEMA = z.enum([
|
|
187
189
|
"MODERN_SANS",
|
|
@@ -261,9 +263,9 @@ function Text({ style, props }) {
|
|
|
261
263
|
};
|
|
262
264
|
const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
|
|
263
265
|
if (props == null ? void 0 : props.markdown) {
|
|
264
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ React57.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
265
267
|
}
|
|
266
|
-
return /* @__PURE__ */
|
|
268
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle }, text);
|
|
267
269
|
}
|
|
268
270
|
var PADDING_SCHEMA2 = z.object({
|
|
269
271
|
top: z.number(),
|
|
@@ -312,7 +314,7 @@ function Avatar({ style, props }) {
|
|
|
312
314
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
313
315
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
314
316
|
};
|
|
315
|
-
return /* @__PURE__ */
|
|
317
|
+
return /* @__PURE__ */ React57.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React57.createElement(
|
|
316
318
|
"img",
|
|
317
319
|
{
|
|
318
320
|
alt,
|
|
@@ -464,14 +466,14 @@ function Button({ style, props }) {
|
|
|
464
466
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
465
467
|
textDecoration: "none"
|
|
466
468
|
};
|
|
467
|
-
return /* @__PURE__ */
|
|
469
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React57.createElement(
|
|
468
470
|
"span",
|
|
469
471
|
{
|
|
470
472
|
dangerouslySetInnerHTML: {
|
|
471
473
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
472
474
|
}
|
|
473
475
|
}
|
|
474
|
-
), /* @__PURE__ */
|
|
476
|
+
), /* @__PURE__ */ React57.createElement("span", null, text), /* @__PURE__ */ React57.createElement(
|
|
475
477
|
"span",
|
|
476
478
|
{
|
|
477
479
|
dangerouslySetInnerHTML: {
|
|
@@ -520,7 +522,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
520
522
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
521
523
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
522
524
|
};
|
|
523
|
-
return /* @__PURE__ */
|
|
525
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle }, /* @__PURE__ */ React57.createElement(
|
|
524
526
|
"table",
|
|
525
527
|
{
|
|
526
528
|
align: "center",
|
|
@@ -529,7 +531,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
529
531
|
border: 0,
|
|
530
532
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
531
533
|
},
|
|
532
|
-
/* @__PURE__ */
|
|
534
|
+
/* @__PURE__ */ React57.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React57.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React57.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React57.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React57.createElement(TableCell, { index: 2, props: blockProps, columns })))
|
|
533
535
|
));
|
|
534
536
|
}
|
|
535
537
|
function TableCell({ index, props, columns }) {
|
|
@@ -547,7 +549,7 @@ function TableCell({ index, props, columns }) {
|
|
|
547
549
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
548
550
|
};
|
|
549
551
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
550
|
-
return /* @__PURE__ */
|
|
552
|
+
return /* @__PURE__ */ React57.createElement("td", { style }, children);
|
|
551
553
|
}
|
|
552
554
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
553
555
|
if (index === 0) {
|
|
@@ -609,9 +611,9 @@ function Container({ style, children }) {
|
|
|
609
611
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
610
612
|
};
|
|
611
613
|
if (!children) {
|
|
612
|
-
return /* @__PURE__ */
|
|
614
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle });
|
|
613
615
|
}
|
|
614
|
-
return /* @__PURE__ */
|
|
616
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle }, children);
|
|
615
617
|
}
|
|
616
618
|
var container_default = Container;
|
|
617
619
|
var COLOR_SCHEMA5 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -645,7 +647,7 @@ function Divider({ style, props }) {
|
|
|
645
647
|
};
|
|
646
648
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
647
649
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
648
|
-
return /* @__PURE__ */
|
|
650
|
+
return /* @__PURE__ */ React57.createElement("div", { style: st }, /* @__PURE__ */ React57.createElement(
|
|
649
651
|
"hr",
|
|
650
652
|
{
|
|
651
653
|
style: {
|
|
@@ -743,11 +745,11 @@ function Heading({ props, style }) {
|
|
|
743
745
|
const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
|
|
744
746
|
switch (level) {
|
|
745
747
|
case "h1":
|
|
746
|
-
return /* @__PURE__ */
|
|
748
|
+
return /* @__PURE__ */ React57.createElement("h1", __spreadValues({}, renderProps));
|
|
747
749
|
case "h2":
|
|
748
|
-
return /* @__PURE__ */
|
|
750
|
+
return /* @__PURE__ */ React57.createElement("h2", __spreadValues({}, renderProps));
|
|
749
751
|
case "h3":
|
|
750
|
-
return /* @__PURE__ */
|
|
752
|
+
return /* @__PURE__ */ React57.createElement("h3", __spreadValues({}, renderProps));
|
|
751
753
|
}
|
|
752
754
|
}
|
|
753
755
|
function getFontSize(level) {
|
|
@@ -829,9 +831,9 @@ function Html({ style, props }) {
|
|
|
829
831
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
830
832
|
};
|
|
831
833
|
if (!children) {
|
|
832
|
-
return /* @__PURE__ */
|
|
834
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle });
|
|
833
835
|
}
|
|
834
|
-
return /* @__PURE__ */
|
|
836
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
835
837
|
}
|
|
836
838
|
var html_default = Html;
|
|
837
839
|
var PADDING_SCHEMA9 = z.object({
|
|
@@ -867,7 +869,7 @@ function Image({ style, props }) {
|
|
|
867
869
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
868
870
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
869
871
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
870
|
-
const imageElement = /* @__PURE__ */
|
|
872
|
+
const imageElement = /* @__PURE__ */ React57.createElement(
|
|
871
873
|
"img",
|
|
872
874
|
{
|
|
873
875
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -887,9 +889,9 @@ function Image({ style, props }) {
|
|
|
887
889
|
}
|
|
888
890
|
);
|
|
889
891
|
if (!linkHref) {
|
|
890
|
-
return /* @__PURE__ */
|
|
892
|
+
return /* @__PURE__ */ React57.createElement("div", { style: sectionStyle }, imageElement);
|
|
891
893
|
}
|
|
892
|
-
return /* @__PURE__ */
|
|
894
|
+
return /* @__PURE__ */ React57.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React57.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
893
895
|
}
|
|
894
896
|
var image_default = Image;
|
|
895
897
|
var FONT_FAMILY_SCHEMA5 = z.enum([
|
|
@@ -1035,7 +1037,7 @@ function Signature({ style, props }) {
|
|
|
1035
1037
|
color: linkColor,
|
|
1036
1038
|
textDecoration: "none"
|
|
1037
1039
|
};
|
|
1038
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
1040
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React57.createElement(
|
|
1039
1041
|
"img",
|
|
1040
1042
|
{
|
|
1041
1043
|
src: imageUrl,
|
|
@@ -1054,18 +1056,18 @@ function Signature({ style, props }) {
|
|
|
1054
1056
|
}
|
|
1055
1057
|
) : null;
|
|
1056
1058
|
const contactParts = [];
|
|
1057
|
-
if (email) contactParts.push(/* @__PURE__ */
|
|
1058
|
-
if (phone) contactParts.push(/* @__PURE__ */
|
|
1059
|
+
if (email) contactParts.push(/* @__PURE__ */ React57.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1060
|
+
if (phone) contactParts.push(/* @__PURE__ */ React57.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1059
1061
|
if (website) {
|
|
1060
1062
|
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1061
|
-
contactParts.push(/* @__PURE__ */
|
|
1063
|
+
contactParts.push(/* @__PURE__ */ React57.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1062
1064
|
}
|
|
1063
|
-
const textContent = /* @__PURE__ */
|
|
1064
|
-
const greetingElement = greeting ? /* @__PURE__ */
|
|
1065
|
+
const textContent = /* @__PURE__ */ React57.createElement("div", null, name && /* @__PURE__ */ React57.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React57.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React57.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React57.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React57.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React57.createElement(React57.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React57.createElement("span", { style: detailStyle }, " \xB7 "), part))));
|
|
1066
|
+
const greetingElement = greeting ? /* @__PURE__ */ React57.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1065
1067
|
if (layout === "vertical") {
|
|
1066
|
-
return /* @__PURE__ */
|
|
1068
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React57.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1067
1069
|
}
|
|
1068
|
-
return /* @__PURE__ */
|
|
1070
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React57.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React57.createElement("tbody", null, /* @__PURE__ */ React57.createElement("tr", null, imageElement && /* @__PURE__ */ React57.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React57.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
1069
1071
|
}
|
|
1070
1072
|
var signature_default = Signature;
|
|
1071
1073
|
var SpacerPropsSchema = z.object({
|
|
@@ -1082,13 +1084,13 @@ function Spacer({ props }) {
|
|
|
1082
1084
|
const style = {
|
|
1083
1085
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
1084
1086
|
};
|
|
1085
|
-
return /* @__PURE__ */
|
|
1087
|
+
return /* @__PURE__ */ React57.createElement("div", { style });
|
|
1086
1088
|
}
|
|
1087
1089
|
var spacer_default = Spacer;
|
|
1088
1090
|
function buildBlockComponent(blocks) {
|
|
1089
1091
|
return function BlockComponent({ type, data }) {
|
|
1090
1092
|
const Component = blocks[type].Component;
|
|
1091
|
-
return /* @__PURE__ */
|
|
1093
|
+
return /* @__PURE__ */ React57.createElement(Component, __spreadValues({}, data));
|
|
1092
1094
|
};
|
|
1093
1095
|
}
|
|
1094
1096
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -1157,9 +1159,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
1157
1159
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
1158
1160
|
let cols = void 0;
|
|
1159
1161
|
if (columns) {
|
|
1160
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1162
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React57.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1161
1163
|
}
|
|
1162
|
-
return /* @__PURE__ */
|
|
1164
|
+
return /* @__PURE__ */ React57.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
1163
1165
|
}
|
|
1164
1166
|
var ContainerPropsSchema2 = z.object({
|
|
1165
1167
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -1170,7 +1172,7 @@ var ContainerPropsSchema2 = z.object({
|
|
|
1170
1172
|
function ContainerReader({ style, props }) {
|
|
1171
1173
|
var _a;
|
|
1172
1174
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
1173
|
-
return /* @__PURE__ */
|
|
1175
|
+
return /* @__PURE__ */ React57.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React57.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1174
1176
|
}
|
|
1175
1177
|
var COLOR_SCHEMA9 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1176
1178
|
var FONT_FAMILY_SCHEMA6 = z.enum([
|
|
@@ -1243,9 +1245,9 @@ function EmailLayoutReader(props) {
|
|
|
1243
1245
|
margin: "0"
|
|
1244
1246
|
};
|
|
1245
1247
|
if (props.backdropDisabled) {
|
|
1246
|
-
return /* @__PURE__ */
|
|
1248
|
+
return /* @__PURE__ */ React57.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React57.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1247
1249
|
}
|
|
1248
|
-
return /* @__PURE__ */
|
|
1250
|
+
return /* @__PURE__ */ React57.createElement(
|
|
1249
1251
|
"div",
|
|
1250
1252
|
{
|
|
1251
1253
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
@@ -1255,7 +1257,7 @@ function EmailLayoutReader(props) {
|
|
|
1255
1257
|
width: "100%"
|
|
1256
1258
|
})
|
|
1257
1259
|
},
|
|
1258
|
-
/* @__PURE__ */
|
|
1260
|
+
/* @__PURE__ */ React57.createElement(
|
|
1259
1261
|
"table",
|
|
1260
1262
|
{
|
|
1261
1263
|
align: "center",
|
|
@@ -1273,7 +1275,7 @@ function EmailLayoutReader(props) {
|
|
|
1273
1275
|
cellPadding: "0",
|
|
1274
1276
|
border: 0
|
|
1275
1277
|
},
|
|
1276
|
-
/* @__PURE__ */
|
|
1278
|
+
/* @__PURE__ */ React57.createElement("tbody", null, /* @__PURE__ */ React57.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React57.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React57.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1277
1279
|
)
|
|
1278
1280
|
);
|
|
1279
1281
|
}
|
|
@@ -1285,7 +1287,7 @@ function useReaderDocument() {
|
|
|
1285
1287
|
}
|
|
1286
1288
|
function ReaderBlock({ id }) {
|
|
1287
1289
|
const document2 = useReaderDocument();
|
|
1288
|
-
return document2[id] ? /* @__PURE__ */
|
|
1290
|
+
return document2[id] ? /* @__PURE__ */ React57.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1289
1291
|
}
|
|
1290
1292
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1291
1293
|
ColumnsContainer: {
|
|
@@ -1342,13 +1344,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1342
1344
|
var ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
|
|
1343
1345
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1344
1346
|
function Reader({ document: document2, rootBlockId }) {
|
|
1345
|
-
return /* @__PURE__ */
|
|
1347
|
+
return /* @__PURE__ */ React57.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React57.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1346
1348
|
}
|
|
1347
1349
|
|
|
1348
1350
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1349
1351
|
function renderToStaticMarkup(document2, { rootBlockId, variables }) {
|
|
1350
1352
|
const html2 = "<!DOCTYPE html>" + renderToStaticMarkup$1(
|
|
1351
|
-
/* @__PURE__ */
|
|
1353
|
+
/* @__PURE__ */ React57.createElement("html", null, /* @__PURE__ */ React57.createElement("body", null, /* @__PURE__ */ React57.createElement(Reader, { document: document2, rootBlockId })))
|
|
1352
1354
|
);
|
|
1353
1355
|
if (!variables) return html2;
|
|
1354
1356
|
return evaluateHandlebars(html2, variables);
|
|
@@ -2000,6 +2002,37 @@ var THEME = createTheme(BASE_THEME, {
|
|
|
2000
2002
|
]
|
|
2001
2003
|
});
|
|
2002
2004
|
var theme_default = THEME;
|
|
2005
|
+
|
|
2006
|
+
// src/locales/en/messages.ts
|
|
2007
|
+
var messages = JSON.parse('{"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"],"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"],"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"],"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"],"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"]}');
|
|
2008
|
+
|
|
2009
|
+
// src/locales/fi/messages.ts
|
|
2010
|
+
var messages2 = JSON.parse('{"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"],"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"],"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"],"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"],"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"]}');
|
|
2011
|
+
|
|
2012
|
+
// src/locales/sv/messages.ts
|
|
2013
|
+
var messages3 = JSON.parse('{"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"],"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"],"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"],"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"],"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"]}');
|
|
2014
|
+
var SUPPORTED_LOCALES = ["en", "sv", "fi"];
|
|
2015
|
+
var CATALOGS = {
|
|
2016
|
+
en: messages,
|
|
2017
|
+
sv: messages3,
|
|
2018
|
+
fi: messages2
|
|
2019
|
+
};
|
|
2020
|
+
var loaded = false;
|
|
2021
|
+
function activateLocale(locale) {
|
|
2022
|
+
const resolved = SUPPORTED_LOCALES.includes(locale != null ? locale : "") ? locale : "en";
|
|
2023
|
+
if (locale && resolved !== locale) {
|
|
2024
|
+
console.warn(`[email-template-editor] Unsupported locale "${locale}", falling back to "en".`);
|
|
2025
|
+
}
|
|
2026
|
+
if (!loaded) {
|
|
2027
|
+
i18n.load({ en: CATALOGS.en, sv: CATALOGS.sv, fi: CATALOGS.fi });
|
|
2028
|
+
loaded = true;
|
|
2029
|
+
}
|
|
2030
|
+
i18n.activate(resolved);
|
|
2031
|
+
return resolved;
|
|
2032
|
+
}
|
|
2033
|
+
function t(id, fallback) {
|
|
2034
|
+
return i18n._(id, {}, { message: fallback != null ? fallback : id });
|
|
2035
|
+
}
|
|
2003
2036
|
var EMPTY_DOCUMENT = {
|
|
2004
2037
|
root: {
|
|
2005
2038
|
type: "EmailLayout",
|
|
@@ -2154,6 +2187,7 @@ var EmailEditorProvider = ({
|
|
|
2154
2187
|
const [currentTemplateId, setCurrentTemplateId] = useState(initialTemplateId);
|
|
2155
2188
|
const [currentTemplateName, setCurrentTemplateName] = useState(initialTemplateName);
|
|
2156
2189
|
const [currentTemplateKind, setCurrentTemplateKind] = useState(null);
|
|
2190
|
+
const [currentTemplateTags, setCurrentTemplateTagsState] = useState([]);
|
|
2157
2191
|
const saveListenersRef = useRef([]);
|
|
2158
2192
|
const onSaveRef = useRef(onSave);
|
|
2159
2193
|
onSaveRef.current = onSave;
|
|
@@ -2165,23 +2199,26 @@ var EmailEditorProvider = ({
|
|
|
2165
2199
|
}
|
|
2166
2200
|
return currentDoc;
|
|
2167
2201
|
}, []);
|
|
2168
|
-
const loadTemplate = useCallback(
|
|
2169
|
-
|
|
2202
|
+
const loadTemplate = useCallback(
|
|
2203
|
+
(_newTemplate, templateId, templateName, kind, tags) => {
|
|
2204
|
+
if (templateId !== void 0) setCurrentTemplateId(templateId);
|
|
2205
|
+
if (templateName !== void 0) setCurrentTemplateName(templateName);
|
|
2206
|
+
if (kind !== void 0) setCurrentTemplateKind(kind);
|
|
2207
|
+
if (tags !== void 0) setCurrentTemplateTagsState(tags != null ? tags : []);
|
|
2208
|
+
},
|
|
2209
|
+
[]
|
|
2210
|
+
);
|
|
2211
|
+
const setCurrentTemplate = useCallback(
|
|
2212
|
+
(templateId, templateName, kind, tags) => {
|
|
2170
2213
|
setCurrentTemplateId(templateId);
|
|
2171
|
-
}
|
|
2172
|
-
if (templateName !== void 0) {
|
|
2173
2214
|
setCurrentTemplateName(templateName);
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
const
|
|
2180
|
-
|
|
2181
|
-
setCurrentTemplateName(templateName);
|
|
2182
|
-
if (kind !== void 0) {
|
|
2183
|
-
setCurrentTemplateKind(kind);
|
|
2184
|
-
}
|
|
2215
|
+
if (kind !== void 0) setCurrentTemplateKind(kind);
|
|
2216
|
+
if (tags !== void 0) setCurrentTemplateTagsState(tags != null ? tags : []);
|
|
2217
|
+
},
|
|
2218
|
+
[]
|
|
2219
|
+
);
|
|
2220
|
+
const setCurrentTemplateTags = useCallback((tags) => {
|
|
2221
|
+
setCurrentTemplateTagsState(tags);
|
|
2185
2222
|
}, []);
|
|
2186
2223
|
const registerSaveListener = useCallback((callback) => {
|
|
2187
2224
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
@@ -2189,16 +2226,31 @@ var EmailEditorProvider = ({
|
|
|
2189
2226
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
2190
2227
|
};
|
|
2191
2228
|
}, []);
|
|
2192
|
-
const value = useMemo(
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2229
|
+
const value = useMemo(
|
|
2230
|
+
() => ({
|
|
2231
|
+
currentTemplateId,
|
|
2232
|
+
currentTemplateName,
|
|
2233
|
+
currentTemplateKind,
|
|
2234
|
+
currentTemplateTags,
|
|
2235
|
+
saveTemplate,
|
|
2236
|
+
loadTemplate,
|
|
2237
|
+
registerSaveListener,
|
|
2238
|
+
setCurrentTemplate,
|
|
2239
|
+
setCurrentTemplateTags
|
|
2240
|
+
}),
|
|
2241
|
+
[
|
|
2242
|
+
currentTemplateId,
|
|
2243
|
+
currentTemplateName,
|
|
2244
|
+
currentTemplateKind,
|
|
2245
|
+
currentTemplateTags,
|
|
2246
|
+
saveTemplate,
|
|
2247
|
+
loadTemplate,
|
|
2248
|
+
registerSaveListener,
|
|
2249
|
+
setCurrentTemplate,
|
|
2250
|
+
setCurrentTemplateTags
|
|
2251
|
+
]
|
|
2252
|
+
);
|
|
2253
|
+
return /* @__PURE__ */ React57.createElement(EmailEditorContext.Provider, { value }, children);
|
|
2202
2254
|
};
|
|
2203
2255
|
var useEmailEditor = () => {
|
|
2204
2256
|
const context = useContext(EmailEditorContext);
|
|
@@ -2212,20 +2264,39 @@ function ImageCallbacksProvider({
|
|
|
2212
2264
|
callbacks,
|
|
2213
2265
|
children
|
|
2214
2266
|
}) {
|
|
2215
|
-
return /* @__PURE__ */
|
|
2267
|
+
return /* @__PURE__ */ React57.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
|
|
2216
2268
|
}
|
|
2217
2269
|
function useImageCallbacks() {
|
|
2218
2270
|
return useContext(ImageCallbacksContext);
|
|
2219
2271
|
}
|
|
2272
|
+
var TITLE_KEYS = {
|
|
2273
|
+
"Editor appearance": "panel.editor-appearance",
|
|
2274
|
+
Template: "panel.template",
|
|
2275
|
+
Export: "panel.export",
|
|
2276
|
+
Global: "panel.global",
|
|
2277
|
+
"Text block": "panel.text-block",
|
|
2278
|
+
"Heading block": "panel.heading-block",
|
|
2279
|
+
"Button block": "panel.button-block",
|
|
2280
|
+
"Image block": "panel.image-block",
|
|
2281
|
+
"Avatar block": "panel.avatar-block",
|
|
2282
|
+
"Signature block": "panel.signature-block",
|
|
2283
|
+
"Spacer block": "panel.spacer-block",
|
|
2284
|
+
"Divider block": "panel.divider-block",
|
|
2285
|
+
"Columns block": "panel.columns-block",
|
|
2286
|
+
"Container block": "panel.container-block",
|
|
2287
|
+
"Html block": "panel.html-block"
|
|
2288
|
+
};
|
|
2220
2289
|
function BaseSidebarPanel({ title, children }) {
|
|
2221
|
-
|
|
2290
|
+
const key = TITLE_KEYS[title];
|
|
2291
|
+
const displayTitle = key ? t(key, title) : title;
|
|
2292
|
+
return /* @__PURE__ */ React57.createElement(Box, { p: 2 }, /* @__PURE__ */ React57.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, displayTitle), /* @__PURE__ */ React57.createElement(Stack, { spacing: 5, mb: 3 }, children));
|
|
2222
2293
|
}
|
|
2223
2294
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
2224
2295
|
const [value, setValue] = useState(defaultValue);
|
|
2225
2296
|
useEffect(() => {
|
|
2226
2297
|
setValue(defaultValue);
|
|
2227
2298
|
}, [defaultValue]);
|
|
2228
|
-
return /* @__PURE__ */
|
|
2299
|
+
return /* @__PURE__ */ React57.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2229
2300
|
ToggleButtonGroup,
|
|
2230
2301
|
{
|
|
2231
2302
|
exclusive: true,
|
|
@@ -2245,7 +2316,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
2245
2316
|
}
|
|
2246
2317
|
function RawSliderInput(_a) {
|
|
2247
2318
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
2248
|
-
return /* @__PURE__ */
|
|
2319
|
+
return /* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React57.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React57.createElement(
|
|
2249
2320
|
Slider,
|
|
2250
2321
|
__spreadProps(__spreadValues({}, props), {
|
|
2251
2322
|
value,
|
|
@@ -2256,14 +2327,14 @@ function RawSliderInput(_a) {
|
|
|
2256
2327
|
setValue(value2);
|
|
2257
2328
|
}
|
|
2258
2329
|
})
|
|
2259
|
-
), /* @__PURE__ */
|
|
2330
|
+
), /* @__PURE__ */ React57.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
2260
2331
|
}
|
|
2261
2332
|
|
|
2262
2333
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
2263
2334
|
function SliderInput(_a) {
|
|
2264
2335
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
2265
2336
|
const [value, setValue] = useState(defaultValue);
|
|
2266
|
-
return /* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2267
2338
|
RawSliderInput,
|
|
2268
2339
|
__spreadValues({
|
|
2269
2340
|
value,
|
|
@@ -2280,7 +2351,7 @@ function TextInput({ helperText, label, placeholder, rows, InputProps: InputProp
|
|
|
2280
2351
|
useEffect(() => {
|
|
2281
2352
|
setValue(defaultValue);
|
|
2282
2353
|
}, [defaultValue]);
|
|
2283
|
-
return /* @__PURE__ */
|
|
2354
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2284
2355
|
TextField,
|
|
2285
2356
|
{
|
|
2286
2357
|
fullWidth: true,
|
|
@@ -2306,7 +2377,7 @@ var TILE_BUTTON = {
|
|
|
2306
2377
|
};
|
|
2307
2378
|
function Swatch({ paletteColors, value, onChange }) {
|
|
2308
2379
|
const renderButton2 = (colorValue) => {
|
|
2309
|
-
return /* @__PURE__ */
|
|
2380
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2310
2381
|
Button$1,
|
|
2311
2382
|
{
|
|
2312
2383
|
key: colorValue,
|
|
@@ -2325,7 +2396,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
2325
2396
|
}
|
|
2326
2397
|
);
|
|
2327
2398
|
};
|
|
2328
|
-
return /* @__PURE__ */
|
|
2399
|
+
return /* @__PURE__ */ React57.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
|
|
2329
2400
|
}
|
|
2330
2401
|
|
|
2331
2402
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2392,7 +2463,7 @@ var SX = {
|
|
|
2392
2463
|
}
|
|
2393
2464
|
};
|
|
2394
2465
|
function Picker({ value, onChange }) {
|
|
2395
|
-
return /* @__PURE__ */
|
|
2466
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React57.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React57.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React57.createElement(Box, { pt: 1 }, /* @__PURE__ */ React57.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
|
|
2396
2467
|
}
|
|
2397
2468
|
|
|
2398
2469
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2417,7 +2488,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2417
2488
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2418
2489
|
return null;
|
|
2419
2490
|
}
|
|
2420
|
-
return /* @__PURE__ */
|
|
2491
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2421
2492
|
ButtonBase,
|
|
2422
2493
|
{
|
|
2423
2494
|
onClick: () => {
|
|
@@ -2425,16 +2496,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2425
2496
|
onChange(null);
|
|
2426
2497
|
}
|
|
2427
2498
|
},
|
|
2428
|
-
/* @__PURE__ */
|
|
2499
|
+
/* @__PURE__ */ React57.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2429
2500
|
);
|
|
2430
2501
|
};
|
|
2431
2502
|
const renderOpenButton = () => {
|
|
2432
2503
|
if (value) {
|
|
2433
|
-
return /* @__PURE__ */
|
|
2504
|
+
return /* @__PURE__ */ React57.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2434
2505
|
}
|
|
2435
|
-
return /* @__PURE__ */
|
|
2506
|
+
return /* @__PURE__ */ React57.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" }));
|
|
2436
2507
|
};
|
|
2437
|
-
return /* @__PURE__ */
|
|
2508
|
+
return /* @__PURE__ */ React57.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React57.createElement(
|
|
2438
2509
|
Menu,
|
|
2439
2510
|
{
|
|
2440
2511
|
anchorEl,
|
|
@@ -2444,7 +2515,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2444
2515
|
sx: { height: "auto", padding: 0 }
|
|
2445
2516
|
}
|
|
2446
2517
|
},
|
|
2447
|
-
/* @__PURE__ */
|
|
2518
|
+
/* @__PURE__ */ React57.createElement(
|
|
2448
2519
|
Picker,
|
|
2449
2520
|
{
|
|
2450
2521
|
value: value || "",
|
|
@@ -2459,10 +2530,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2459
2530
|
|
|
2460
2531
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2461
2532
|
function ColorInput2(props) {
|
|
2462
|
-
return /* @__PURE__ */
|
|
2533
|
+
return /* @__PURE__ */ React57.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2463
2534
|
}
|
|
2464
2535
|
function NullableColorInput(props) {
|
|
2465
|
-
return /* @__PURE__ */
|
|
2536
|
+
return /* @__PURE__ */ React57.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2466
2537
|
}
|
|
2467
2538
|
|
|
2468
2539
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2515,13 +2586,13 @@ var FONT_FAMILIES = [
|
|
|
2515
2586
|
];
|
|
2516
2587
|
|
|
2517
2588
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2518
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2589
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React57.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2519
2590
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2520
2591
|
const [value, setValue] = useState(defaultValue != null ? defaultValue : "inherit");
|
|
2521
2592
|
useEffect(() => {
|
|
2522
2593
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2523
2594
|
}, [defaultValue]);
|
|
2524
|
-
return /* @__PURE__ */
|
|
2595
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2525
2596
|
TextField,
|
|
2526
2597
|
{
|
|
2527
2598
|
select: true,
|
|
@@ -2534,7 +2605,7 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2534
2605
|
onChange(v === null ? null : v);
|
|
2535
2606
|
}
|
|
2536
2607
|
},
|
|
2537
|
-
/* @__PURE__ */
|
|
2608
|
+
/* @__PURE__ */ React57.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2538
2609
|
OPTIONS
|
|
2539
2610
|
);
|
|
2540
2611
|
}
|
|
@@ -2547,10 +2618,10 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2547
2618
|
setValue(value2);
|
|
2548
2619
|
onChange(value2);
|
|
2549
2620
|
};
|
|
2550
|
-
return /* @__PURE__ */
|
|
2621
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2551
2622
|
RawSliderInput,
|
|
2552
2623
|
{
|
|
2553
|
-
iconLabel: /* @__PURE__ */
|
|
2624
|
+
iconLabel: /* @__PURE__ */ React57.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2554
2625
|
value,
|
|
2555
2626
|
setValue: handleChange,
|
|
2556
2627
|
units: "px",
|
|
@@ -2565,7 +2636,7 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2565
2636
|
useEffect(() => {
|
|
2566
2637
|
setValue(defaultValue);
|
|
2567
2638
|
}, [defaultValue]);
|
|
2568
|
-
return /* @__PURE__ */
|
|
2639
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2569
2640
|
RadioGroupInput,
|
|
2570
2641
|
{
|
|
2571
2642
|
label,
|
|
@@ -2575,8 +2646,8 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2575
2646
|
onChange(fontWeight);
|
|
2576
2647
|
}
|
|
2577
2648
|
},
|
|
2578
|
-
/* @__PURE__ */
|
|
2579
|
-
/* @__PURE__ */
|
|
2649
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "normal" }, "Regular"),
|
|
2650
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "bold" }, "Bold")
|
|
2580
2651
|
);
|
|
2581
2652
|
}
|
|
2582
2653
|
function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
@@ -2588,10 +2659,10 @@ function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
|
2588
2659
|
setValue(v);
|
|
2589
2660
|
onChange(v === 0 ? null : v);
|
|
2590
2661
|
};
|
|
2591
|
-
return /* @__PURE__ */
|
|
2662
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2592
2663
|
RawSliderInput,
|
|
2593
2664
|
{
|
|
2594
|
-
iconLabel: /* @__PURE__ */
|
|
2665
|
+
iconLabel: /* @__PURE__ */ React57.createElement(SpaceBarOutlined, { sx: { fontSize: 16 } }),
|
|
2595
2666
|
value,
|
|
2596
2667
|
setValue: handleChange,
|
|
2597
2668
|
units: "px",
|
|
@@ -2610,10 +2681,10 @@ function LineHeightInput({ label, defaultValue, onChange }) {
|
|
|
2610
2681
|
setValue(v);
|
|
2611
2682
|
onChange(v === 0 ? null : v);
|
|
2612
2683
|
};
|
|
2613
|
-
return /* @__PURE__ */
|
|
2684
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2614
2685
|
RawSliderInput,
|
|
2615
2686
|
{
|
|
2616
|
-
iconLabel: /* @__PURE__ */
|
|
2687
|
+
iconLabel: /* @__PURE__ */ React57.createElement(FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
|
|
2617
2688
|
value,
|
|
2618
2689
|
setValue: handleChange,
|
|
2619
2690
|
units: "",
|
|
@@ -2642,10 +2713,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2642
2713
|
setValue(v);
|
|
2643
2714
|
onChange(v);
|
|
2644
2715
|
}
|
|
2645
|
-
return /* @__PURE__ */
|
|
2716
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2646
2717
|
RawSliderInput,
|
|
2647
2718
|
{
|
|
2648
|
-
iconLabel: /* @__PURE__ */
|
|
2719
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2649
2720
|
value: value.top,
|
|
2650
2721
|
setValue: (num) => handleChange("top", num),
|
|
2651
2722
|
units: "px",
|
|
@@ -2654,10 +2725,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2654
2725
|
max: 80,
|
|
2655
2726
|
marks: true
|
|
2656
2727
|
}
|
|
2657
|
-
), /* @__PURE__ */
|
|
2728
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2658
2729
|
RawSliderInput,
|
|
2659
2730
|
{
|
|
2660
|
-
iconLabel: /* @__PURE__ */
|
|
2731
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2661
2732
|
value: value.bottom,
|
|
2662
2733
|
setValue: (num) => handleChange("bottom", num),
|
|
2663
2734
|
units: "px",
|
|
@@ -2666,10 +2737,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2666
2737
|
max: 80,
|
|
2667
2738
|
marks: true
|
|
2668
2739
|
}
|
|
2669
|
-
), /* @__PURE__ */
|
|
2740
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2670
2741
|
RawSliderInput,
|
|
2671
2742
|
{
|
|
2672
|
-
iconLabel: /* @__PURE__ */
|
|
2743
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2673
2744
|
value: value.left,
|
|
2674
2745
|
setValue: (num) => handleChange("left", num),
|
|
2675
2746
|
units: "px",
|
|
@@ -2678,10 +2749,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2678
2749
|
max: 80,
|
|
2679
2750
|
marks: true
|
|
2680
2751
|
}
|
|
2681
|
-
), /* @__PURE__ */
|
|
2752
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2682
2753
|
RawSliderInput,
|
|
2683
2754
|
{
|
|
2684
|
-
iconLabel: /* @__PURE__ */
|
|
2755
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2685
2756
|
value: value.right,
|
|
2686
2757
|
setValue: (num) => handleChange("right", num),
|
|
2687
2758
|
units: "px",
|
|
@@ -2697,7 +2768,7 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2697
2768
|
useEffect(() => {
|
|
2698
2769
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2699
2770
|
}, [defaultValue]);
|
|
2700
|
-
return /* @__PURE__ */
|
|
2771
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2701
2772
|
RadioGroupInput,
|
|
2702
2773
|
{
|
|
2703
2774
|
label,
|
|
@@ -2707,9 +2778,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2707
2778
|
onChange(value2);
|
|
2708
2779
|
}
|
|
2709
2780
|
},
|
|
2710
|
-
/* @__PURE__ */
|
|
2711
|
-
/* @__PURE__ */
|
|
2712
|
-
/* @__PURE__ */
|
|
2781
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React57.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2782
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React57.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2783
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React57.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2713
2784
|
);
|
|
2714
2785
|
}
|
|
2715
2786
|
|
|
@@ -2722,46 +2793,46 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2722
2793
|
};
|
|
2723
2794
|
switch (name) {
|
|
2724
2795
|
case "backgroundColor":
|
|
2725
|
-
return /* @__PURE__ */
|
|
2796
|
+
return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: t("style.background-color", "Background color"), defaultValue, onChange: handleChange });
|
|
2726
2797
|
case "borderColor":
|
|
2727
|
-
return /* @__PURE__ */
|
|
2798
|
+
return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: t("style.border-color", "Border color"), defaultValue, onChange: handleChange });
|
|
2728
2799
|
case "borderRadius":
|
|
2729
|
-
return /* @__PURE__ */
|
|
2800
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2730
2801
|
SliderInput,
|
|
2731
2802
|
{
|
|
2732
|
-
iconLabel: /* @__PURE__ */
|
|
2803
|
+
iconLabel: /* @__PURE__ */ React57.createElement(RoundedCornerOutlined, null),
|
|
2733
2804
|
units: "px",
|
|
2734
2805
|
step: 4,
|
|
2735
2806
|
marks: true,
|
|
2736
2807
|
min: 0,
|
|
2737
2808
|
max: 48,
|
|
2738
|
-
label: "Border radius",
|
|
2809
|
+
label: t("style.border-radius", "Border radius"),
|
|
2739
2810
|
defaultValue,
|
|
2740
2811
|
onChange: handleChange
|
|
2741
2812
|
}
|
|
2742
2813
|
);
|
|
2743
2814
|
case "color":
|
|
2744
|
-
return /* @__PURE__ */
|
|
2815
|
+
return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: t("style.text-color", "Text color"), defaultValue, onChange: handleChange });
|
|
2745
2816
|
case "fontFamily":
|
|
2746
|
-
return /* @__PURE__ */
|
|
2817
|
+
return /* @__PURE__ */ React57.createElement(NullableFontFamily, { label: t("style.font-family", "Font family"), defaultValue, onChange: handleChange });
|
|
2747
2818
|
case "fontSize":
|
|
2748
|
-
return /* @__PURE__ */
|
|
2819
|
+
return /* @__PURE__ */ React57.createElement(FontSizeInput, { label: t("style.font-size", "Font size"), defaultValue, onChange: handleChange });
|
|
2749
2820
|
case "fontWeight":
|
|
2750
|
-
return /* @__PURE__ */
|
|
2821
|
+
return /* @__PURE__ */ React57.createElement(FontWeightInput, { label: t("style.font-weight", "Font weight"), defaultValue, onChange: handleChange });
|
|
2751
2822
|
case "lineHeight":
|
|
2752
|
-
return /* @__PURE__ */
|
|
2823
|
+
return /* @__PURE__ */ React57.createElement(LineHeightInput, { label: t("style.line-height", "Line height"), defaultValue, onChange: handleChange });
|
|
2753
2824
|
case "letterSpacing":
|
|
2754
|
-
return /* @__PURE__ */
|
|
2825
|
+
return /* @__PURE__ */ React57.createElement(LetterSpacingInput, { label: t("style.letter-spacing", "Letter spacing"), defaultValue, onChange: handleChange });
|
|
2755
2826
|
case "textAlign":
|
|
2756
|
-
return /* @__PURE__ */
|
|
2827
|
+
return /* @__PURE__ */ React57.createElement(TextAlignInput, { label: t("style.alignment", "Alignment"), defaultValue, onChange: handleChange });
|
|
2757
2828
|
case "padding":
|
|
2758
|
-
return /* @__PURE__ */
|
|
2829
|
+
return /* @__PURE__ */ React57.createElement(PaddingInput, { label: t("style.padding", "Padding"), defaultValue, onChange: handleChange });
|
|
2759
2830
|
}
|
|
2760
2831
|
}
|
|
2761
2832
|
|
|
2762
2833
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2763
2834
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2764
|
-
return /* @__PURE__ */
|
|
2835
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, names.map((name) => /* @__PURE__ */ React57.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2765
2836
|
}
|
|
2766
2837
|
|
|
2767
2838
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
@@ -2781,11 +2852,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2781
2852
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2782
2853
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2783
2854
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2784
|
-
return /* @__PURE__ */
|
|
2855
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React57.createElement(
|
|
2785
2856
|
SliderInput,
|
|
2786
2857
|
{
|
|
2787
2858
|
label: "Size",
|
|
2788
|
-
iconLabel: /* @__PURE__ */
|
|
2859
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2789
2860
|
units: "px",
|
|
2790
2861
|
step: 3,
|
|
2791
2862
|
min: 32,
|
|
@@ -2795,7 +2866,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2795
2866
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2796
2867
|
}
|
|
2797
2868
|
}
|
|
2798
|
-
), /* @__PURE__ */
|
|
2869
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2799
2870
|
RadioGroupInput,
|
|
2800
2871
|
{
|
|
2801
2872
|
label: "Shape",
|
|
@@ -2804,10 +2875,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2804
2875
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2805
2876
|
}
|
|
2806
2877
|
},
|
|
2807
|
-
/* @__PURE__ */
|
|
2808
|
-
/* @__PURE__ */
|
|
2809
|
-
/* @__PURE__ */
|
|
2810
|
-
), /* @__PURE__ */
|
|
2878
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "circle" }, "Circle"),
|
|
2879
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "square" }, "Square"),
|
|
2880
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rounded" }, "Rounded")
|
|
2881
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2811
2882
|
TextInput,
|
|
2812
2883
|
{
|
|
2813
2884
|
label: "Image URL",
|
|
@@ -2816,7 +2887,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2816
2887
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2817
2888
|
}
|
|
2818
2889
|
}
|
|
2819
|
-
), /* @__PURE__ */
|
|
2890
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2820
2891
|
TextInput,
|
|
2821
2892
|
{
|
|
2822
2893
|
label: "Alt text",
|
|
@@ -2825,7 +2896,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2825
2896
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2826
2897
|
}
|
|
2827
2898
|
}
|
|
2828
|
-
), /* @__PURE__ */
|
|
2899
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2829
2900
|
MultiStylePropertyPanel,
|
|
2830
2901
|
{
|
|
2831
2902
|
names: ["textAlign", "padding"],
|
|
@@ -2853,65 +2924,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2853
2924
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2854
2925
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2855
2926
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2856
|
-
return /* @__PURE__ */
|
|
2927
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React57.createElement(
|
|
2857
2928
|
TextInput,
|
|
2858
2929
|
{
|
|
2859
2930
|
label: "Text",
|
|
2860
2931
|
defaultValue: text,
|
|
2861
2932
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2862
2933
|
}
|
|
2863
|
-
), /* @__PURE__ */
|
|
2934
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2864
2935
|
TextInput,
|
|
2865
2936
|
{
|
|
2866
2937
|
label: "Url",
|
|
2867
2938
|
defaultValue: url,
|
|
2868
2939
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2869
2940
|
}
|
|
2870
|
-
), /* @__PURE__ */
|
|
2941
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2871
2942
|
RadioGroupInput,
|
|
2872
2943
|
{
|
|
2873
2944
|
label: "Width",
|
|
2874
2945
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2875
2946
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2876
2947
|
},
|
|
2877
|
-
/* @__PURE__ */
|
|
2878
|
-
/* @__PURE__ */
|
|
2879
|
-
), /* @__PURE__ */
|
|
2948
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
|
|
2949
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "AUTO" }, "Auto")
|
|
2950
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2880
2951
|
RadioGroupInput,
|
|
2881
2952
|
{
|
|
2882
2953
|
label: "Size",
|
|
2883
2954
|
defaultValue: size,
|
|
2884
2955
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2885
2956
|
},
|
|
2886
|
-
/* @__PURE__ */
|
|
2887
|
-
/* @__PURE__ */
|
|
2888
|
-
/* @__PURE__ */
|
|
2889
|
-
/* @__PURE__ */
|
|
2890
|
-
), /* @__PURE__ */
|
|
2957
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "x-small" }, "Xs"),
|
|
2958
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "small" }, "Sm"),
|
|
2959
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "medium" }, "Md"),
|
|
2960
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "large" }, "Lg")
|
|
2961
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2891
2962
|
RadioGroupInput,
|
|
2892
2963
|
{
|
|
2893
2964
|
label: "Style",
|
|
2894
2965
|
defaultValue: buttonStyle,
|
|
2895
2966
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2896
2967
|
},
|
|
2897
|
-
/* @__PURE__ */
|
|
2898
|
-
/* @__PURE__ */
|
|
2899
|
-
/* @__PURE__ */
|
|
2900
|
-
), /* @__PURE__ */
|
|
2968
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
|
|
2969
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
|
|
2970
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "pill" }, "Pill")
|
|
2971
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2901
2972
|
ColorInput2,
|
|
2902
2973
|
{
|
|
2903
2974
|
label: "Text color",
|
|
2904
2975
|
defaultValue: buttonTextColor,
|
|
2905
2976
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2906
2977
|
}
|
|
2907
|
-
), /* @__PURE__ */
|
|
2978
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2908
2979
|
ColorInput2,
|
|
2909
2980
|
{
|
|
2910
2981
|
label: "Button color",
|
|
2911
2982
|
defaultValue: buttonBackgroundColor,
|
|
2912
2983
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2913
2984
|
}
|
|
2914
|
-
), /* @__PURE__ */
|
|
2985
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2915
2986
|
MultiStylePropertyPanel,
|
|
2916
2987
|
{
|
|
2917
2988
|
names: [
|
|
@@ -2946,7 +3017,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2946
3017
|
const value = parseInt(ev.target.value);
|
|
2947
3018
|
onChange(isNaN(value) ? null : value);
|
|
2948
3019
|
};
|
|
2949
|
-
return /* @__PURE__ */
|
|
3020
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2950
3021
|
TextField,
|
|
2951
3022
|
{
|
|
2952
3023
|
fullWidth: true,
|
|
@@ -2957,7 +3028,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2957
3028
|
placeholder: "auto",
|
|
2958
3029
|
size: "small",
|
|
2959
3030
|
InputProps: {
|
|
2960
|
-
endAdornment: /* @__PURE__ */
|
|
3031
|
+
endAdornment: /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2961
3032
|
}
|
|
2962
3033
|
}
|
|
2963
3034
|
);
|
|
@@ -2979,7 +3050,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2979
3050
|
};
|
|
2980
3051
|
let column3 = null;
|
|
2981
3052
|
{
|
|
2982
|
-
column3 = /* @__PURE__ */
|
|
3053
|
+
column3 = /* @__PURE__ */ React57.createElement(
|
|
2983
3054
|
TextDimensionInput,
|
|
2984
3055
|
{
|
|
2985
3056
|
label: "Column 3",
|
|
@@ -2990,7 +3061,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2990
3061
|
}
|
|
2991
3062
|
);
|
|
2992
3063
|
}
|
|
2993
|
-
return /* @__PURE__ */
|
|
3064
|
+
return /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React57.createElement(
|
|
2994
3065
|
TextDimensionInput,
|
|
2995
3066
|
{
|
|
2996
3067
|
label: "Column 1",
|
|
@@ -2999,7 +3070,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2999
3070
|
setIndexValue(0, v);
|
|
3000
3071
|
}
|
|
3001
3072
|
}
|
|
3002
|
-
), /* @__PURE__ */
|
|
3073
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3003
3074
|
TextDimensionInput,
|
|
3004
3075
|
{
|
|
3005
3076
|
label: "Column 2",
|
|
@@ -3024,7 +3095,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3024
3095
|
setErrors(res.error);
|
|
3025
3096
|
}
|
|
3026
3097
|
};
|
|
3027
|
-
return /* @__PURE__ */
|
|
3098
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React57.createElement(
|
|
3028
3099
|
RadioGroupInput,
|
|
3029
3100
|
{
|
|
3030
3101
|
label: "Number of columns",
|
|
@@ -3033,9 +3104,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3033
3104
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
3034
3105
|
}
|
|
3035
3106
|
},
|
|
3036
|
-
/* @__PURE__ */
|
|
3037
|
-
/* @__PURE__ */
|
|
3038
|
-
), /* @__PURE__ */
|
|
3107
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "2" }, "2"),
|
|
3108
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "3" }, "3")
|
|
3109
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3039
3110
|
ColumnWidthsInput,
|
|
3040
3111
|
{
|
|
3041
3112
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -3043,11 +3114,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3043
3114
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
3044
3115
|
}
|
|
3045
3116
|
}
|
|
3046
|
-
), /* @__PURE__ */
|
|
3117
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3047
3118
|
SliderInput,
|
|
3048
3119
|
{
|
|
3049
3120
|
label: "Columns gap",
|
|
3050
|
-
iconLabel: /* @__PURE__ */
|
|
3121
|
+
iconLabel: /* @__PURE__ */ React57.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
3051
3122
|
units: "px",
|
|
3052
3123
|
step: 4,
|
|
3053
3124
|
marks: true,
|
|
@@ -3056,7 +3127,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3056
3127
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
3057
3128
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
3058
3129
|
}
|
|
3059
|
-
), /* @__PURE__ */
|
|
3130
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3060
3131
|
RadioGroupInput,
|
|
3061
3132
|
{
|
|
3062
3133
|
label: "Alignment",
|
|
@@ -3065,10 +3136,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3065
3136
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
3066
3137
|
}
|
|
3067
3138
|
},
|
|
3068
|
-
/* @__PURE__ */
|
|
3069
|
-
/* @__PURE__ */
|
|
3070
|
-
/* @__PURE__ */
|
|
3071
|
-
), /* @__PURE__ */
|
|
3139
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React57.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3140
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React57.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3141
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React57.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3142
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3072
3143
|
MultiStylePropertyPanel,
|
|
3073
3144
|
{
|
|
3074
3145
|
names: ["backgroundColor", "padding"],
|
|
@@ -3097,7 +3168,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3097
3168
|
setErrors(res.error);
|
|
3098
3169
|
}
|
|
3099
3170
|
};
|
|
3100
|
-
return /* @__PURE__ */
|
|
3171
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React57.createElement(
|
|
3101
3172
|
MultiStylePropertyPanel,
|
|
3102
3173
|
{
|
|
3103
3174
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -3120,18 +3191,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3120
3191
|
};
|
|
3121
3192
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
3122
3193
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
3123
|
-
return /* @__PURE__ */
|
|
3194
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React57.createElement(
|
|
3124
3195
|
ColorInput2,
|
|
3125
3196
|
{
|
|
3126
3197
|
label: "Color",
|
|
3127
3198
|
defaultValue: lineColor,
|
|
3128
3199
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
3129
3200
|
}
|
|
3130
|
-
), /* @__PURE__ */
|
|
3201
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3131
3202
|
SliderInput,
|
|
3132
3203
|
{
|
|
3133
3204
|
label: "Height",
|
|
3134
|
-
iconLabel: /* @__PURE__ */
|
|
3205
|
+
iconLabel: /* @__PURE__ */ React57.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3135
3206
|
units: "px",
|
|
3136
3207
|
step: 1,
|
|
3137
3208
|
min: 1,
|
|
@@ -3139,7 +3210,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3139
3210
|
defaultValue: lineHeight,
|
|
3140
3211
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
3141
3212
|
}
|
|
3142
|
-
), /* @__PURE__ */
|
|
3213
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3143
3214
|
MultiStylePropertyPanel,
|
|
3144
3215
|
{
|
|
3145
3216
|
names: ["backgroundColor", "padding"],
|
|
@@ -3183,11 +3254,11 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3183
3254
|
useEffect(() => {
|
|
3184
3255
|
setValue(defaultValue);
|
|
3185
3256
|
}, [defaultValue]);
|
|
3186
|
-
return /* @__PURE__ */
|
|
3257
|
+
return /* @__PURE__ */ React57.createElement(
|
|
3187
3258
|
FormControlLabel,
|
|
3188
3259
|
{
|
|
3189
3260
|
label,
|
|
3190
|
-
control: /* @__PURE__ */
|
|
3261
|
+
control: /* @__PURE__ */ React57.createElement(
|
|
3191
3262
|
Switch,
|
|
3192
3263
|
{
|
|
3193
3264
|
checked: value,
|
|
@@ -3215,38 +3286,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3215
3286
|
}
|
|
3216
3287
|
};
|
|
3217
3288
|
const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
|
|
3218
|
-
return /* @__PURE__ */
|
|
3289
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React57.createElement(
|
|
3219
3290
|
BooleanInput,
|
|
3220
3291
|
{
|
|
3221
3292
|
label: "Disable backdrop",
|
|
3222
3293
|
defaultValue: backdropDisabled,
|
|
3223
3294
|
onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
|
|
3224
3295
|
}
|
|
3225
|
-
), !backdropDisabled && /* @__PURE__ */
|
|
3296
|
+
), !backdropDisabled && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
3226
3297
|
ColorInput2,
|
|
3227
3298
|
{
|
|
3228
3299
|
label: "Backdrop color",
|
|
3229
3300
|
defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
|
|
3230
3301
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
3231
3302
|
}
|
|
3232
|
-
), /* @__PURE__ */
|
|
3303
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3233
3304
|
ColorInput2,
|
|
3234
3305
|
{
|
|
3235
3306
|
label: "Canvas color",
|
|
3236
3307
|
defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
|
|
3237
3308
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
3238
3309
|
}
|
|
3239
|
-
), /* @__PURE__ */
|
|
3310
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3240
3311
|
NullableColorInput,
|
|
3241
3312
|
{
|
|
3242
3313
|
label: "Canvas border color",
|
|
3243
3314
|
defaultValue: (_d = data.borderColor) != null ? _d : null,
|
|
3244
3315
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
3245
3316
|
}
|
|
3246
|
-
), /* @__PURE__ */
|
|
3317
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3247
3318
|
SliderInput,
|
|
3248
3319
|
{
|
|
3249
|
-
iconLabel: /* @__PURE__ */
|
|
3320
|
+
iconLabel: /* @__PURE__ */ React57.createElement(RoundedCornerOutlined, null),
|
|
3250
3321
|
units: "px",
|
|
3251
3322
|
step: 4,
|
|
3252
3323
|
marks: true,
|
|
@@ -3256,14 +3327,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3256
3327
|
defaultValue: (_e = data.borderRadius) != null ? _e : 0,
|
|
3257
3328
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
3258
3329
|
}
|
|
3259
|
-
)), /* @__PURE__ */
|
|
3330
|
+
)), /* @__PURE__ */ React57.createElement(
|
|
3260
3331
|
NullableFontFamily,
|
|
3261
3332
|
{
|
|
3262
3333
|
label: "Font family",
|
|
3263
3334
|
defaultValue: "MODERN_SANS",
|
|
3264
3335
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
3265
3336
|
}
|
|
3266
|
-
), /* @__PURE__ */
|
|
3337
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3267
3338
|
ColorInput2,
|
|
3268
3339
|
{
|
|
3269
3340
|
label: "Text color",
|
|
@@ -3284,7 +3355,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3284
3355
|
setErrors(res.error);
|
|
3285
3356
|
}
|
|
3286
3357
|
};
|
|
3287
|
-
return /* @__PURE__ */
|
|
3358
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React57.createElement(
|
|
3288
3359
|
TextInput,
|
|
3289
3360
|
{
|
|
3290
3361
|
label: "Content",
|
|
@@ -3294,7 +3365,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3294
3365
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
3295
3366
|
}
|
|
3296
3367
|
}
|
|
3297
|
-
), /* @__PURE__ */
|
|
3368
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3298
3369
|
RadioGroupInput,
|
|
3299
3370
|
{
|
|
3300
3371
|
label: "Level",
|
|
@@ -3303,10 +3374,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3303
3374
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
3304
3375
|
}
|
|
3305
3376
|
},
|
|
3306
|
-
/* @__PURE__ */
|
|
3307
|
-
/* @__PURE__ */
|
|
3308
|
-
/* @__PURE__ */
|
|
3309
|
-
), /* @__PURE__ */
|
|
3377
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "h1" }, "H1"),
|
|
3378
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "h2" }, "H2"),
|
|
3379
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "h3" }, "H3")
|
|
3380
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3310
3381
|
MultiStylePropertyPanel,
|
|
3311
3382
|
{
|
|
3312
3383
|
names: [
|
|
@@ -3336,7 +3407,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3336
3407
|
setErrors(res.error);
|
|
3337
3408
|
}
|
|
3338
3409
|
};
|
|
3339
|
-
return /* @__PURE__ */
|
|
3410
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React57.createElement(
|
|
3340
3411
|
TextInput,
|
|
3341
3412
|
{
|
|
3342
3413
|
label: "Content",
|
|
@@ -3344,7 +3415,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3344
3415
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
3345
3416
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
3346
3417
|
}
|
|
3347
|
-
), /* @__PURE__ */
|
|
3418
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3348
3419
|
MultiStylePropertyPanel,
|
|
3349
3420
|
{
|
|
3350
3421
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -3401,7 +3472,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3401
3472
|
setBusy(false);
|
|
3402
3473
|
}
|
|
3403
3474
|
});
|
|
3404
|
-
return /* @__PURE__ */
|
|
3475
|
+
return /* @__PURE__ */ React57.createElement(Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React57.createElement(DialogTitle, null, "Image library"), /* @__PURE__ */ React57.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React57.createElement(
|
|
3405
3476
|
TextField,
|
|
3406
3477
|
{
|
|
3407
3478
|
fullWidth: true,
|
|
@@ -3411,11 +3482,11 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3411
3482
|
onChange: (e) => setQuery(e.target.value),
|
|
3412
3483
|
autoFocus: true,
|
|
3413
3484
|
InputProps: {
|
|
3414
|
-
startAdornment: /* @__PURE__ */
|
|
3485
|
+
startAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React57.createElement(SearchOutlined, { fontSize: "small" }))
|
|
3415
3486
|
},
|
|
3416
3487
|
sx: { mb: 2 }
|
|
3417
3488
|
}
|
|
3418
|
-
), error && /* @__PURE__ */
|
|
3489
|
+
), error && /* @__PURE__ */ React57.createElement(Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React57.createElement(Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React57.createElement(CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", textAlign: "center", py: 4 } }, query ? "No images match your search." : "No images in the library yet."), filtered && filtered.length > 0 && /* @__PURE__ */ React57.createElement(
|
|
3419
3490
|
Box,
|
|
3420
3491
|
{
|
|
3421
3492
|
sx: {
|
|
@@ -3424,7 +3495,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3424
3495
|
gap: 1.5
|
|
3425
3496
|
}
|
|
3426
3497
|
},
|
|
3427
|
-
filtered.map((img) => /* @__PURE__ */
|
|
3498
|
+
filtered.map((img) => /* @__PURE__ */ React57.createElement(
|
|
3428
3499
|
ImageTile,
|
|
3429
3500
|
{
|
|
3430
3501
|
key: img.url,
|
|
@@ -3433,7 +3504,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3433
3504
|
onDelete: deleteImage ? () => handleDelete(img.url) : void 0
|
|
3434
3505
|
}
|
|
3435
3506
|
))
|
|
3436
|
-
)), /* @__PURE__ */
|
|
3507
|
+
)), /* @__PURE__ */ React57.createElement(DialogActions, null, /* @__PURE__ */ React57.createElement(Button$1, { onClick: onClose }, "Close")));
|
|
3437
3508
|
}
|
|
3438
3509
|
function ImageTile({
|
|
3439
3510
|
image,
|
|
@@ -3443,7 +3514,7 @@ function ImageTile({
|
|
|
3443
3514
|
var _a, _b;
|
|
3444
3515
|
const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
|
|
3445
3516
|
const label = image.alt || image.url.split("/").pop() || "image";
|
|
3446
|
-
return /* @__PURE__ */
|
|
3517
|
+
return /* @__PURE__ */ React57.createElement(
|
|
3447
3518
|
Box,
|
|
3448
3519
|
{
|
|
3449
3520
|
sx: {
|
|
@@ -3459,7 +3530,7 @@ function ImageTile({
|
|
|
3459
3530
|
},
|
|
3460
3531
|
onClick: onPick
|
|
3461
3532
|
},
|
|
3462
|
-
/* @__PURE__ */
|
|
3533
|
+
/* @__PURE__ */ React57.createElement(
|
|
3463
3534
|
Box,
|
|
3464
3535
|
{
|
|
3465
3536
|
component: "img",
|
|
@@ -3468,8 +3539,8 @@ function ImageTile({
|
|
|
3468
3539
|
sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
|
|
3469
3540
|
}
|
|
3470
3541
|
),
|
|
3471
|
-
/* @__PURE__ */
|
|
3472
|
-
onDelete && /* @__PURE__ */
|
|
3542
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
|
|
3543
|
+
onDelete && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React57.createElement(
|
|
3473
3544
|
IconButton,
|
|
3474
3545
|
{
|
|
3475
3546
|
size: "small",
|
|
@@ -3489,7 +3560,7 @@ function ImageTile({
|
|
|
3489
3560
|
},
|
|
3490
3561
|
"aria-label": "Delete image"
|
|
3491
3562
|
},
|
|
3492
|
-
/* @__PURE__ */
|
|
3563
|
+
/* @__PURE__ */ React57.createElement(DeleteOutline, { fontSize: "small" })
|
|
3493
3564
|
))
|
|
3494
3565
|
);
|
|
3495
3566
|
}
|
|
@@ -3542,13 +3613,13 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3542
3613
|
});
|
|
3543
3614
|
const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
|
|
3544
3615
|
const showHttpWarning = isHttpUrl(url);
|
|
3545
|
-
return /* @__PURE__ */
|
|
3616
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
3546
3617
|
Button$1,
|
|
3547
3618
|
{
|
|
3548
3619
|
fullWidth: true,
|
|
3549
3620
|
variant: "outlined",
|
|
3550
3621
|
size: "small",
|
|
3551
|
-
startIcon: uploading ? /* @__PURE__ */
|
|
3622
|
+
startIcon: uploading ? /* @__PURE__ */ React57.createElement(CircularProgress, { size: 14 }) : /* @__PURE__ */ React57.createElement(CloudUploadOutlined, { fontSize: "small" }),
|
|
3552
3623
|
disabled: uploading,
|
|
3553
3624
|
onClick: () => {
|
|
3554
3625
|
var _a2;
|
|
@@ -3556,7 +3627,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3556
3627
|
}
|
|
3557
3628
|
},
|
|
3558
3629
|
uploading ? "Uploading\u2026" : "Upload"
|
|
3559
|
-
), /* @__PURE__ */
|
|
3630
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3560
3631
|
"input",
|
|
3561
3632
|
{
|
|
3562
3633
|
ref: fileInputRef,
|
|
@@ -3570,17 +3641,17 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3570
3641
|
if (file) yield handleFile(file);
|
|
3571
3642
|
})
|
|
3572
3643
|
}
|
|
3573
|
-
)), loadImages && /* @__PURE__ */
|
|
3644
|
+
)), loadImages && /* @__PURE__ */ React57.createElement(
|
|
3574
3645
|
Button$1,
|
|
3575
3646
|
{
|
|
3576
3647
|
fullWidth: true,
|
|
3577
3648
|
variant: "outlined",
|
|
3578
3649
|
size: "small",
|
|
3579
|
-
startIcon: /* @__PURE__ */
|
|
3650
|
+
startIcon: /* @__PURE__ */ React57.createElement(CollectionsOutlined, { fontSize: "small" }),
|
|
3580
3651
|
onClick: () => setLibraryOpen(true)
|
|
3581
3652
|
},
|
|
3582
3653
|
"Library"
|
|
3583
|
-
)), uploadError && /* @__PURE__ */
|
|
3654
|
+
)), uploadError && /* @__PURE__ */ React57.createElement(Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React57.createElement(
|
|
3584
3655
|
TextInput,
|
|
3585
3656
|
{
|
|
3586
3657
|
label: "Source URL",
|
|
@@ -3590,14 +3661,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3590
3661
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
|
|
3591
3662
|
}
|
|
3592
3663
|
}
|
|
3593
|
-
), showHttpWarning && /* @__PURE__ */
|
|
3664
|
+
), showHttpWarning && /* @__PURE__ */ React57.createElement(Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React57.createElement(ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React57.createElement(Box, { sx: { fontSize: 12, color: "warning.dark" } }, "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery.")), /* @__PURE__ */ React57.createElement(
|
|
3594
3665
|
TextInput,
|
|
3595
3666
|
{
|
|
3596
3667
|
label: "Alt text",
|
|
3597
3668
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
3598
3669
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
3599
3670
|
}
|
|
3600
|
-
), /* @__PURE__ */
|
|
3671
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3601
3672
|
TextInput,
|
|
3602
3673
|
{
|
|
3603
3674
|
label: "Click through URL",
|
|
@@ -3607,38 +3678,38 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3607
3678
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
3608
3679
|
}
|
|
3609
3680
|
}
|
|
3610
|
-
), /* @__PURE__ */
|
|
3681
|
+
), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(
|
|
3611
3682
|
TextDimensionInput,
|
|
3612
3683
|
{
|
|
3613
3684
|
label: "Width",
|
|
3614
3685
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
3615
3686
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
3616
3687
|
}
|
|
3617
|
-
), /* @__PURE__ */
|
|
3688
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3618
3689
|
TextDimensionInput,
|
|
3619
3690
|
{
|
|
3620
3691
|
label: "Height",
|
|
3621
3692
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
3622
3693
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
3623
3694
|
}
|
|
3624
|
-
)), /* @__PURE__ */
|
|
3695
|
+
)), /* @__PURE__ */ React57.createElement(
|
|
3625
3696
|
RadioGroupInput,
|
|
3626
3697
|
{
|
|
3627
3698
|
label: "Alignment",
|
|
3628
3699
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
3629
3700
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
3630
3701
|
},
|
|
3631
|
-
/* @__PURE__ */
|
|
3632
|
-
/* @__PURE__ */
|
|
3633
|
-
/* @__PURE__ */
|
|
3634
|
-
), /* @__PURE__ */
|
|
3702
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React57.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3703
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React57.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3704
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React57.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3705
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3635
3706
|
MultiStylePropertyPanel,
|
|
3636
3707
|
{
|
|
3637
3708
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
3638
3709
|
value: data.style,
|
|
3639
3710
|
onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
|
|
3640
3711
|
}
|
|
3641
|
-
), loadImages && /* @__PURE__ */
|
|
3712
|
+
), loadImages && /* @__PURE__ */ React57.createElement(
|
|
3642
3713
|
ImageLibraryDialog,
|
|
3643
3714
|
{
|
|
3644
3715
|
open: libraryOpen,
|
|
@@ -3677,74 +3748,74 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3677
3748
|
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3678
3749
|
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3679
3750
|
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3680
|
-
return /* @__PURE__ */
|
|
3751
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React57.createElement(
|
|
3681
3752
|
TextInput,
|
|
3682
3753
|
{
|
|
3683
3754
|
label: "Greeting",
|
|
3684
3755
|
defaultValue: greeting,
|
|
3685
3756
|
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3686
3757
|
}
|
|
3687
|
-
), /* @__PURE__ */
|
|
3758
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3688
3759
|
TextInput,
|
|
3689
3760
|
{
|
|
3690
3761
|
label: "Name",
|
|
3691
3762
|
defaultValue: name,
|
|
3692
3763
|
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3693
3764
|
}
|
|
3694
|
-
), /* @__PURE__ */
|
|
3765
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3695
3766
|
TextInput,
|
|
3696
3767
|
{
|
|
3697
3768
|
label: "Title",
|
|
3698
3769
|
defaultValue: title,
|
|
3699
3770
|
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3700
3771
|
}
|
|
3701
|
-
), /* @__PURE__ */
|
|
3772
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3702
3773
|
TextInput,
|
|
3703
3774
|
{
|
|
3704
3775
|
label: "Company",
|
|
3705
3776
|
defaultValue: company,
|
|
3706
3777
|
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3707
3778
|
}
|
|
3708
|
-
), /* @__PURE__ */
|
|
3779
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3709
3780
|
TextInput,
|
|
3710
3781
|
{
|
|
3711
3782
|
label: "Address",
|
|
3712
3783
|
defaultValue: address,
|
|
3713
3784
|
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3714
3785
|
}
|
|
3715
|
-
), /* @__PURE__ */
|
|
3786
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3716
3787
|
TextInput,
|
|
3717
3788
|
{
|
|
3718
3789
|
label: "Email",
|
|
3719
3790
|
defaultValue: email,
|
|
3720
3791
|
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3721
3792
|
}
|
|
3722
|
-
), /* @__PURE__ */
|
|
3793
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3723
3794
|
TextInput,
|
|
3724
3795
|
{
|
|
3725
3796
|
label: "Phone",
|
|
3726
3797
|
defaultValue: phone,
|
|
3727
3798
|
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3728
3799
|
}
|
|
3729
|
-
), /* @__PURE__ */
|
|
3800
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3730
3801
|
TextInput,
|
|
3731
3802
|
{
|
|
3732
3803
|
label: "Website",
|
|
3733
3804
|
defaultValue: website,
|
|
3734
3805
|
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3735
3806
|
}
|
|
3736
|
-
), /* @__PURE__ */
|
|
3807
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3737
3808
|
TextInput,
|
|
3738
3809
|
{
|
|
3739
3810
|
label: "Image URL",
|
|
3740
3811
|
defaultValue: imageUrl,
|
|
3741
3812
|
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3742
3813
|
}
|
|
3743
|
-
), /* @__PURE__ */
|
|
3814
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3744
3815
|
SliderInput,
|
|
3745
3816
|
{
|
|
3746
3817
|
label: "Image size",
|
|
3747
|
-
iconLabel: /* @__PURE__ */
|
|
3818
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3748
3819
|
units: "px",
|
|
3749
3820
|
step: 4,
|
|
3750
3821
|
min: 32,
|
|
@@ -3752,47 +3823,47 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3752
3823
|
defaultValue: imageSize,
|
|
3753
3824
|
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3754
3825
|
}
|
|
3755
|
-
), /* @__PURE__ */
|
|
3826
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3756
3827
|
RadioGroupInput,
|
|
3757
3828
|
{
|
|
3758
3829
|
label: "Image shape",
|
|
3759
3830
|
defaultValue: imageShape,
|
|
3760
3831
|
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3761
3832
|
},
|
|
3762
|
-
/* @__PURE__ */
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
3765
|
-
), /* @__PURE__ */
|
|
3833
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "circle" }, "Circle"),
|
|
3834
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "square" }, "Square"),
|
|
3835
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rounded" }, "Rounded")
|
|
3836
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3766
3837
|
RadioGroupInput,
|
|
3767
3838
|
{
|
|
3768
3839
|
label: "Layout",
|
|
3769
3840
|
defaultValue: layout,
|
|
3770
3841
|
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3771
3842
|
},
|
|
3772
|
-
/* @__PURE__ */
|
|
3773
|
-
/* @__PURE__ */
|
|
3774
|
-
), /* @__PURE__ */
|
|
3843
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
|
|
3844
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "vertical" }, "Vertical")
|
|
3845
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3775
3846
|
ColorInput2,
|
|
3776
3847
|
{
|
|
3777
3848
|
label: "Name color",
|
|
3778
3849
|
defaultValue: nameColor,
|
|
3779
3850
|
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3780
3851
|
}
|
|
3781
|
-
), /* @__PURE__ */
|
|
3852
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3782
3853
|
ColorInput2,
|
|
3783
3854
|
{
|
|
3784
3855
|
label: "Text color",
|
|
3785
3856
|
defaultValue: textColor,
|
|
3786
3857
|
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3787
3858
|
}
|
|
3788
|
-
), /* @__PURE__ */
|
|
3859
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3789
3860
|
ColorInput2,
|
|
3790
3861
|
{
|
|
3791
3862
|
label: "Link color",
|
|
3792
3863
|
defaultValue: linkColor,
|
|
3793
3864
|
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3794
3865
|
}
|
|
3795
|
-
), /* @__PURE__ */
|
|
3866
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3796
3867
|
MultiStylePropertyPanel,
|
|
3797
3868
|
{
|
|
3798
3869
|
names: ["backgroundColor", "fontFamily", "padding"],
|
|
@@ -3813,11 +3884,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3813
3884
|
setErrors(res.error);
|
|
3814
3885
|
}
|
|
3815
3886
|
};
|
|
3816
|
-
return /* @__PURE__ */
|
|
3887
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React57.createElement(
|
|
3817
3888
|
SliderInput,
|
|
3818
3889
|
{
|
|
3819
3890
|
label: "Height",
|
|
3820
|
-
iconLabel: /* @__PURE__ */
|
|
3891
|
+
iconLabel: /* @__PURE__ */ React57.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3821
3892
|
units: "px",
|
|
3822
3893
|
step: 4,
|
|
3823
3894
|
min: 4,
|
|
@@ -3839,7 +3910,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3839
3910
|
setErrors(res.error);
|
|
3840
3911
|
}
|
|
3841
3912
|
};
|
|
3842
|
-
return /* @__PURE__ */
|
|
3913
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React57.createElement(
|
|
3843
3914
|
TextInput,
|
|
3844
3915
|
{
|
|
3845
3916
|
label: "Content",
|
|
@@ -3847,14 +3918,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3847
3918
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3848
3919
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3849
3920
|
}
|
|
3850
|
-
), /* @__PURE__ */
|
|
3921
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3851
3922
|
BooleanInput,
|
|
3852
3923
|
{
|
|
3853
3924
|
label: "Markdown",
|
|
3854
3925
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3855
3926
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3856
3927
|
}
|
|
3857
|
-
), /* @__PURE__ */
|
|
3928
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3858
3929
|
MultiStylePropertyPanel,
|
|
3859
3930
|
{
|
|
3860
3931
|
names: [
|
|
@@ -3876,7 +3947,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3876
3947
|
|
|
3877
3948
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
3878
3949
|
function renderMessage(val) {
|
|
3879
|
-
return /* @__PURE__ */
|
|
3950
|
+
return /* @__PURE__ */ React57.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React57.createElement(Typography, { color: "text.secondary" }, val));
|
|
3880
3951
|
}
|
|
3881
3952
|
function ConfigurationPanel() {
|
|
3882
3953
|
const document2 = useDocument();
|
|
@@ -3892,55 +3963,55 @@ function ConfigurationPanel() {
|
|
|
3892
3963
|
const { data, type } = block;
|
|
3893
3964
|
switch (type) {
|
|
3894
3965
|
case "Avatar":
|
|
3895
|
-
return /* @__PURE__ */
|
|
3966
|
+
return /* @__PURE__ */ React57.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3896
3967
|
case "Button":
|
|
3897
|
-
return /* @__PURE__ */
|
|
3968
|
+
return /* @__PURE__ */ React57.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3898
3969
|
case "ColumnsContainer":
|
|
3899
|
-
return /* @__PURE__ */
|
|
3970
|
+
return /* @__PURE__ */ React57.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3900
3971
|
case "Container":
|
|
3901
|
-
return /* @__PURE__ */
|
|
3972
|
+
return /* @__PURE__ */ React57.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3902
3973
|
case "Divider":
|
|
3903
|
-
return /* @__PURE__ */
|
|
3974
|
+
return /* @__PURE__ */ React57.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3904
3975
|
case "Heading":
|
|
3905
|
-
return /* @__PURE__ */
|
|
3976
|
+
return /* @__PURE__ */ React57.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3906
3977
|
case "Html":
|
|
3907
|
-
return /* @__PURE__ */
|
|
3978
|
+
return /* @__PURE__ */ React57.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3908
3979
|
case "Image":
|
|
3909
|
-
return /* @__PURE__ */
|
|
3980
|
+
return /* @__PURE__ */ React57.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3910
3981
|
case "EmailLayout":
|
|
3911
|
-
return /* @__PURE__ */
|
|
3982
|
+
return /* @__PURE__ */ React57.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3912
3983
|
case "Spacer":
|
|
3913
|
-
return /* @__PURE__ */
|
|
3984
|
+
return /* @__PURE__ */ React57.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3914
3985
|
case "Signature":
|
|
3915
|
-
return /* @__PURE__ */
|
|
3986
|
+
return /* @__PURE__ */ React57.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3916
3987
|
case "Text":
|
|
3917
|
-
return /* @__PURE__ */
|
|
3988
|
+
return /* @__PURE__ */ React57.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3918
3989
|
default:
|
|
3919
|
-
return /* @__PURE__ */
|
|
3990
|
+
return /* @__PURE__ */ React57.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
3920
3991
|
}
|
|
3921
3992
|
}
|
|
3922
3993
|
function StylesPanel() {
|
|
3923
3994
|
const block = useDocument().root;
|
|
3924
3995
|
if (!block) {
|
|
3925
|
-
return /* @__PURE__ */
|
|
3996
|
+
return /* @__PURE__ */ React57.createElement("p", null, "Block not found");
|
|
3926
3997
|
}
|
|
3927
3998
|
const { data, type } = block;
|
|
3928
3999
|
if (type !== "EmailLayout") {
|
|
3929
4000
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3930
4001
|
}
|
|
3931
|
-
return /* @__PURE__ */
|
|
4002
|
+
return /* @__PURE__ */ React57.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3932
4003
|
}
|
|
3933
4004
|
function TemplateDownloadButton() {
|
|
3934
4005
|
const doc = useDocument();
|
|
3935
4006
|
const href = useMemo(() => {
|
|
3936
4007
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3937
4008
|
}, [doc]);
|
|
3938
|
-
return /* @__PURE__ */
|
|
4009
|
+
return /* @__PURE__ */ React57.createElement(
|
|
3939
4010
|
Button$1,
|
|
3940
4011
|
{
|
|
3941
4012
|
variant: "outlined",
|
|
3942
4013
|
color: "primary",
|
|
3943
|
-
startIcon: /* @__PURE__ */
|
|
4014
|
+
startIcon: /* @__PURE__ */ React57.createElement(FileDownloadOutlined, null),
|
|
3944
4015
|
href,
|
|
3945
4016
|
download: "emailTemplate.json",
|
|
3946
4017
|
fullWidth: true
|
|
@@ -3950,8 +4021,18 @@ function TemplateDownloadButton() {
|
|
|
3950
4021
|
}
|
|
3951
4022
|
|
|
3952
4023
|
// src/app/inspector-drawer/template-panel.tsx
|
|
3953
|
-
function TemplatePanel({
|
|
3954
|
-
|
|
4024
|
+
function TemplatePanel({
|
|
4025
|
+
deleteTemplate,
|
|
4026
|
+
copyTemplate,
|
|
4027
|
+
renameTemplate
|
|
4028
|
+
}) {
|
|
4029
|
+
const {
|
|
4030
|
+
currentTemplateId,
|
|
4031
|
+
currentTemplateName,
|
|
4032
|
+
currentTemplateTags,
|
|
4033
|
+
setCurrentTemplate,
|
|
4034
|
+
setCurrentTemplateTags
|
|
4035
|
+
} = useEmailEditor();
|
|
3955
4036
|
const document2 = useDocument();
|
|
3956
4037
|
const persistenceEnabled = usePersistenceEnabled();
|
|
3957
4038
|
const workspaceBackground = useWorkspaceBackground();
|
|
@@ -3972,7 +4053,7 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3972
4053
|
window.alert("Template copied successfully!");
|
|
3973
4054
|
}
|
|
3974
4055
|
};
|
|
3975
|
-
const workspaceToggle = /* @__PURE__ */
|
|
4056
|
+
const workspaceToggle = /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Editor appearance" }, /* @__PURE__ */ React57.createElement(Stack, { spacing: 1 }, /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.secondary" } }, "Workspace background"), /* @__PURE__ */ React57.createElement(
|
|
3976
4057
|
ToggleButtonGroup,
|
|
3977
4058
|
{
|
|
3978
4059
|
value: workspaceBackground,
|
|
@@ -3980,13 +4061,27 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3980
4061
|
size: "small",
|
|
3981
4062
|
onChange: (_, v) => v && setWorkspaceBackground(v)
|
|
3982
4063
|
},
|
|
3983
|
-
/* @__PURE__ */
|
|
3984
|
-
/* @__PURE__ */
|
|
3985
|
-
), /* @__PURE__ */
|
|
4064
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "checkerboard", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React57.createElement(GridOnOutlined, { fontSize: "small" }), "Checkerboard"),
|
|
4065
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "solid", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React57.createElement(SquareOutlined, { fontSize: "small" }), "Solid")
|
|
4066
|
+
), /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.disabled" } }, "Editor-only \u2014 never reaches the rendered email.")));
|
|
3986
4067
|
if (!currentTemplateId) {
|
|
3987
|
-
return /* @__PURE__ */
|
|
4068
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected"), workspaceToggle);
|
|
3988
4069
|
}
|
|
3989
|
-
return /* @__PURE__ */
|
|
4070
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Details" }, /* @__PURE__ */ React57.createElement(
|
|
4071
|
+
DetailsEditor,
|
|
4072
|
+
{
|
|
4073
|
+
templateId: currentTemplateId,
|
|
4074
|
+
currentName: currentTemplateName != null ? currentTemplateName : "",
|
|
4075
|
+
currentTags: currentTemplateTags,
|
|
4076
|
+
canEdit: Boolean(renameTemplate),
|
|
4077
|
+
onSave: (name, tags) => __async(null, null, function* () {
|
|
4078
|
+
if (!renameTemplate) return;
|
|
4079
|
+
yield renameTemplate(currentTemplateId, name, { tags });
|
|
4080
|
+
setCurrentTemplate(currentTemplateId, name);
|
|
4081
|
+
setCurrentTemplateTags(tags);
|
|
4082
|
+
})
|
|
4083
|
+
}
|
|
4084
|
+
)), /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React57.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React57.createElement(
|
|
3990
4085
|
Typography,
|
|
3991
4086
|
{
|
|
3992
4087
|
variant: "body2",
|
|
@@ -3999,29 +4094,127 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3999
4094
|
}
|
|
4000
4095
|
},
|
|
4001
4096
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
4002
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
4097
|
+
), persistenceEnabled && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
4003
4098
|
Button$1,
|
|
4004
4099
|
{
|
|
4005
4100
|
variant: "outlined",
|
|
4006
4101
|
color: "primary",
|
|
4007
|
-
startIcon: /* @__PURE__ */
|
|
4102
|
+
startIcon: /* @__PURE__ */ React57.createElement(ContentCopyOutlined, null),
|
|
4008
4103
|
onClick: handleCopyToSamples,
|
|
4009
4104
|
fullWidth: true,
|
|
4010
4105
|
disabled: !copyTemplate
|
|
4011
4106
|
},
|
|
4012
4107
|
"Save as Sample Template"
|
|
4013
|
-
), /* @__PURE__ */
|
|
4108
|
+
), /* @__PURE__ */ React57.createElement(
|
|
4014
4109
|
Button$1,
|
|
4015
4110
|
{
|
|
4016
4111
|
variant: "outlined",
|
|
4017
4112
|
color: "error",
|
|
4018
|
-
startIcon: /* @__PURE__ */
|
|
4113
|
+
startIcon: /* @__PURE__ */ React57.createElement(DeleteOutlined, null),
|
|
4019
4114
|
onClick: handleDelete,
|
|
4020
4115
|
fullWidth: true,
|
|
4021
4116
|
disabled: !deleteTemplate
|
|
4022
4117
|
},
|
|
4023
4118
|
"Delete Template"
|
|
4024
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
4119
|
+
)))), persistenceEnabled && /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React57.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React57.createElement(TemplateDownloadButton, null))), workspaceToggle);
|
|
4120
|
+
}
|
|
4121
|
+
function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }) {
|
|
4122
|
+
const [name, setName] = useState(currentName);
|
|
4123
|
+
const [tags, setTags] = useState(currentTags);
|
|
4124
|
+
const [tagInput, setTagInput] = useState("");
|
|
4125
|
+
const [saving, setSaving] = useState(false);
|
|
4126
|
+
const [justSaved, setJustSaved] = useState(false);
|
|
4127
|
+
useEffect(() => {
|
|
4128
|
+
setName(currentName);
|
|
4129
|
+
}, [templateId, currentName]);
|
|
4130
|
+
useEffect(() => {
|
|
4131
|
+
setTags(currentTags);
|
|
4132
|
+
}, [templateId, currentTags.join("")]);
|
|
4133
|
+
const addTag = () => {
|
|
4134
|
+
const trimmed = tagInput.trim();
|
|
4135
|
+
if (!trimmed) return;
|
|
4136
|
+
if (tags.some((t2) => t2.toLowerCase() === trimmed.toLowerCase())) {
|
|
4137
|
+
setTagInput("");
|
|
4138
|
+
return;
|
|
4139
|
+
}
|
|
4140
|
+
setTags([...tags, trimmed]);
|
|
4141
|
+
setTagInput("");
|
|
4142
|
+
};
|
|
4143
|
+
const removeTag = (tag) => setTags(tags.filter((t2) => t2 !== tag));
|
|
4144
|
+
const dirty = name !== currentName || tags.length !== currentTags.length || tags.some((t2, i) => t2 !== currentTags[i]);
|
|
4145
|
+
const handleSave = () => __async(null, null, function* () {
|
|
4146
|
+
if (!canEdit || !dirty || !name.trim()) return;
|
|
4147
|
+
setSaving(true);
|
|
4148
|
+
try {
|
|
4149
|
+
yield onSave(name.trim(), tags);
|
|
4150
|
+
setJustSaved(true);
|
|
4151
|
+
window.setTimeout(() => setJustSaved(false), 1600);
|
|
4152
|
+
} finally {
|
|
4153
|
+
setSaving(false);
|
|
4154
|
+
}
|
|
4155
|
+
});
|
|
4156
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1.5 }, /* @__PURE__ */ React57.createElement(
|
|
4157
|
+
TextField,
|
|
4158
|
+
{
|
|
4159
|
+
size: "small",
|
|
4160
|
+
label: "Name",
|
|
4161
|
+
value: name,
|
|
4162
|
+
onChange: (e) => setName(e.target.value),
|
|
4163
|
+
disabled: !canEdit || saving,
|
|
4164
|
+
fullWidth: true
|
|
4165
|
+
}
|
|
4166
|
+
), /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 0.5 } }, "Tags"), tags.length > 0 ? /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React57.createElement(
|
|
4167
|
+
Chip,
|
|
4168
|
+
{
|
|
4169
|
+
key: tag,
|
|
4170
|
+
label: tag,
|
|
4171
|
+
size: "small",
|
|
4172
|
+
onDelete: canEdit && !saving ? () => removeTag(tag) : void 0
|
|
4173
|
+
}
|
|
4174
|
+
))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, "No tags. Suggested: ", /* @__PURE__ */ React57.createElement("i", null, "transactional"), ", ", /* @__PURE__ */ React57.createElement("i", null, "marketing"), "."), /* @__PURE__ */ React57.createElement(
|
|
4175
|
+
TextField,
|
|
4176
|
+
{
|
|
4177
|
+
size: "small",
|
|
4178
|
+
fullWidth: true,
|
|
4179
|
+
placeholder: "Add a tag",
|
|
4180
|
+
value: tagInput,
|
|
4181
|
+
onChange: (e) => setTagInput(e.target.value),
|
|
4182
|
+
disabled: !canEdit || saving,
|
|
4183
|
+
onKeyDown: (e) => {
|
|
4184
|
+
if (e.key === "Enter" || e.key === ",") {
|
|
4185
|
+
e.preventDefault();
|
|
4186
|
+
addTag();
|
|
4187
|
+
} else if (e.key === "Backspace" && !tagInput && tags.length > 0) {
|
|
4188
|
+
e.preventDefault();
|
|
4189
|
+
removeTag(tags[tags.length - 1]);
|
|
4190
|
+
}
|
|
4191
|
+
},
|
|
4192
|
+
InputProps: {
|
|
4193
|
+
endAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React57.createElement(
|
|
4194
|
+
Button$1,
|
|
4195
|
+
{
|
|
4196
|
+
size: "small",
|
|
4197
|
+
onClick: addTag,
|
|
4198
|
+
disabled: !canEdit || saving || !tagInput.trim(),
|
|
4199
|
+
startIcon: /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" }),
|
|
4200
|
+
sx: { textTransform: "none" }
|
|
4201
|
+
},
|
|
4202
|
+
"Add"
|
|
4203
|
+
))
|
|
4204
|
+
}
|
|
4205
|
+
}
|
|
4206
|
+
)), /* @__PURE__ */ React57.createElement(Tooltip, { title: canEdit ? "" : "Wire a renameTemplate callback to enable editing from here", placement: "top" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
4207
|
+
Button$1,
|
|
4208
|
+
{
|
|
4209
|
+
variant: "contained",
|
|
4210
|
+
size: "small",
|
|
4211
|
+
fullWidth: true,
|
|
4212
|
+
onClick: handleSave,
|
|
4213
|
+
disabled: !canEdit || saving || !dirty || !name.trim(),
|
|
4214
|
+
startIcon: justSaved ? /* @__PURE__ */ React57.createElement(CheckOutlined, { fontSize: "small" }) : null
|
|
4215
|
+
},
|
|
4216
|
+
saving ? "Saving\u2026" : justSaved ? "Saved" : "Save details"
|
|
4217
|
+
))));
|
|
4025
4218
|
}
|
|
4026
4219
|
|
|
4027
4220
|
// src/app/variables/variable-utils.ts
|
|
@@ -4195,7 +4388,7 @@ function VariablesPanel() {
|
|
|
4195
4388
|
const lastFocused = useLastFocusedEditable();
|
|
4196
4389
|
const root = document2.root;
|
|
4197
4390
|
if (!root || root.type !== "EmailLayout") {
|
|
4198
|
-
return /* @__PURE__ */
|
|
4391
|
+
return /* @__PURE__ */ React57.createElement(Box, { p: 2 }, /* @__PURE__ */ React57.createElement(Alert, { severity: "info" }, "Open a template to manage variables."));
|
|
4199
4392
|
}
|
|
4200
4393
|
const data = root.data;
|
|
4201
4394
|
const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
|
|
@@ -4290,7 +4483,7 @@ function VariablesPanel() {
|
|
|
4290
4483
|
} catch (e) {
|
|
4291
4484
|
}
|
|
4292
4485
|
});
|
|
4293
|
-
return /* @__PURE__ */
|
|
4486
|
+
return /* @__PURE__ */ React57.createElement(Box, { p: 2 }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React57.createElement(Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Add variable" }, /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React57.createElement(Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), ". In Preview mode, tokens render with the sample values below."), undeclared.length > 0 && /* @__PURE__ */ React57.createElement(Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React57.createElement(AlertTitle, { sx: { fontSize: 13 } }, "Undeclared in body"), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React57.createElement(
|
|
4294
4487
|
Chip,
|
|
4295
4488
|
{
|
|
4296
4489
|
key: name,
|
|
@@ -4298,12 +4491,12 @@ function VariablesPanel() {
|
|
|
4298
4491
|
label: name,
|
|
4299
4492
|
onClick: () => addFromToken(name),
|
|
4300
4493
|
onDelete: () => addFromToken(name),
|
|
4301
|
-
deleteIcon: /* @__PURE__ */
|
|
4494
|
+
deleteIcon: /* @__PURE__ */ React57.createElement(AddOutlined, null),
|
|
4302
4495
|
sx: { fontFamily: "monospace" }
|
|
4303
4496
|
}
|
|
4304
|
-
))), /* @__PURE__ */
|
|
4497
|
+
))), /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, "Click a token to declare it.")), variables.length === 0 ? /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React57.createElement(Stack, { spacing: 2 }, variables.map((v, i) => {
|
|
4305
4498
|
var _a2;
|
|
4306
|
-
return /* @__PURE__ */
|
|
4499
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4307
4500
|
VariableRow,
|
|
4308
4501
|
{
|
|
4309
4502
|
key: i,
|
|
@@ -4354,7 +4547,7 @@ function VariableRow({
|
|
|
4354
4547
|
onCommitRename(draftName.trim());
|
|
4355
4548
|
}
|
|
4356
4549
|
};
|
|
4357
|
-
return /* @__PURE__ */
|
|
4550
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(
|
|
4358
4551
|
TextField,
|
|
4359
4552
|
{
|
|
4360
4553
|
label: "Name",
|
|
@@ -4379,7 +4572,7 @@ function VariableRow({
|
|
|
4379
4572
|
error: Boolean(nameError),
|
|
4380
4573
|
helperText: nameError != null ? nameError : " "
|
|
4381
4574
|
}
|
|
4382
|
-
), /* @__PURE__ */
|
|
4575
|
+
), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Copy {{name}}" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
4383
4576
|
IconButton,
|
|
4384
4577
|
{
|
|
4385
4578
|
size: "small",
|
|
@@ -4387,8 +4580,8 @@ function VariableRow({
|
|
|
4387
4580
|
disabled: !hasName,
|
|
4388
4581
|
"aria-label": `Copy ${variable.name || "variable"} token`
|
|
4389
4582
|
},
|
|
4390
|
-
/* @__PURE__ */
|
|
4391
|
-
))), /* @__PURE__ */
|
|
4583
|
+
/* @__PURE__ */ React57.createElement(ContentCopyOutlined, { fontSize: "small" })
|
|
4584
|
+
))), /* @__PURE__ */ React57.createElement(Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
4392
4585
|
IconButton,
|
|
4393
4586
|
{
|
|
4394
4587
|
size: "small",
|
|
@@ -4396,16 +4589,16 @@ function VariableRow({
|
|
|
4396
4589
|
disabled: !hasName || !canInsert,
|
|
4397
4590
|
"aria-label": `Insert ${variable.name || "variable"} at cursor`
|
|
4398
4591
|
},
|
|
4399
|
-
/* @__PURE__ */
|
|
4400
|
-
))), /* @__PURE__ */
|
|
4592
|
+
/* @__PURE__ */ React57.createElement(InputOutlined, { fontSize: "small" })
|
|
4593
|
+
))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Remove" }, /* @__PURE__ */ React57.createElement(
|
|
4401
4594
|
IconButton,
|
|
4402
4595
|
{
|
|
4403
4596
|
size: "small",
|
|
4404
4597
|
onClick: onRemove,
|
|
4405
4598
|
"aria-label": `Remove ${variable.name || "variable"}`
|
|
4406
4599
|
},
|
|
4407
|
-
/* @__PURE__ */
|
|
4408
|
-
)))), /* @__PURE__ */
|
|
4600
|
+
/* @__PURE__ */ React57.createElement(DeleteOutline, { fontSize: "small" })
|
|
4601
|
+
)))), /* @__PURE__ */ React57.createElement(
|
|
4409
4602
|
TextField,
|
|
4410
4603
|
{
|
|
4411
4604
|
label: "Description",
|
|
@@ -4415,7 +4608,7 @@ function VariableRow({
|
|
|
4415
4608
|
onChange: (e) => onChangeDescription(e.target.value),
|
|
4416
4609
|
placeholder: "Optional"
|
|
4417
4610
|
}
|
|
4418
|
-
), /* @__PURE__ */
|
|
4611
|
+
), /* @__PURE__ */ React57.createElement(
|
|
4419
4612
|
TextField,
|
|
4420
4613
|
{
|
|
4421
4614
|
label: "Sample value",
|
|
@@ -4425,7 +4618,7 @@ function VariableRow({
|
|
|
4425
4618
|
onChange: (e) => onChangeSampleValue(e.target.value),
|
|
4426
4619
|
placeholder: "Shown in Preview mode",
|
|
4427
4620
|
InputProps: {
|
|
4428
|
-
startAdornment: /* @__PURE__ */
|
|
4621
|
+
startAdornment: /* @__PURE__ */ React57.createElement(
|
|
4429
4622
|
DataObjectOutlined,
|
|
4430
4623
|
{
|
|
4431
4624
|
fontSize: "small",
|
|
@@ -4434,7 +4627,7 @@ function VariableRow({
|
|
|
4434
4627
|
)
|
|
4435
4628
|
}
|
|
4436
4629
|
}
|
|
4437
|
-
), /* @__PURE__ */
|
|
4630
|
+
), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React57.createElement(Chip, { size: "small", color: "warning", variant: "outlined", label: "Unused in body" }) : /* @__PURE__ */ React57.createElement(
|
|
4438
4631
|
Chip,
|
|
4439
4632
|
{
|
|
4440
4633
|
size: "small",
|
|
@@ -4451,6 +4644,7 @@ function InspectorDrawer({
|
|
|
4451
4644
|
exitDuration = 225,
|
|
4452
4645
|
deleteTemplate,
|
|
4453
4646
|
copyTemplate,
|
|
4647
|
+
renameTemplate,
|
|
4454
4648
|
savingEnabled = true
|
|
4455
4649
|
} = {}) {
|
|
4456
4650
|
const selectedSidebarTab = useSelectedSidebarTab();
|
|
@@ -4458,22 +4652,23 @@ function InspectorDrawer({
|
|
|
4458
4652
|
const renderCurrentSidebarPanel = () => {
|
|
4459
4653
|
switch (selectedSidebarTab) {
|
|
4460
4654
|
case "block-configuration":
|
|
4461
|
-
return /* @__PURE__ */
|
|
4655
|
+
return /* @__PURE__ */ React57.createElement(ConfigurationPanel, null);
|
|
4462
4656
|
case "styles":
|
|
4463
|
-
return /* @__PURE__ */
|
|
4657
|
+
return /* @__PURE__ */ React57.createElement(StylesPanel, null);
|
|
4464
4658
|
case "variables":
|
|
4465
|
-
return /* @__PURE__ */
|
|
4659
|
+
return /* @__PURE__ */ React57.createElement(VariablesPanel, null);
|
|
4466
4660
|
case "template-settings":
|
|
4467
|
-
return /* @__PURE__ */
|
|
4661
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4468
4662
|
TemplatePanel,
|
|
4469
4663
|
{
|
|
4470
4664
|
deleteTemplate,
|
|
4471
|
-
copyTemplate
|
|
4665
|
+
copyTemplate,
|
|
4666
|
+
renameTemplate
|
|
4472
4667
|
}
|
|
4473
4668
|
);
|
|
4474
4669
|
}
|
|
4475
4670
|
};
|
|
4476
|
-
return /* @__PURE__ */
|
|
4671
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4477
4672
|
Drawer,
|
|
4478
4673
|
{
|
|
4479
4674
|
variant: "persistent",
|
|
@@ -4495,7 +4690,7 @@ function InspectorDrawer({
|
|
|
4495
4690
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
4496
4691
|
}
|
|
4497
4692
|
},
|
|
4498
|
-
/* @__PURE__ */
|
|
4693
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React57.createElement(Box, { px: 1 }, /* @__PURE__ */ React57.createElement(
|
|
4499
4694
|
Tabs,
|
|
4500
4695
|
{
|
|
4501
4696
|
value: selectedSidebarTab,
|
|
@@ -4503,12 +4698,12 @@ function InspectorDrawer({
|
|
|
4503
4698
|
variant: "fullWidth",
|
|
4504
4699
|
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
4505
4700
|
},
|
|
4506
|
-
/* @__PURE__ */
|
|
4507
|
-
/* @__PURE__ */
|
|
4508
|
-
/* @__PURE__ */
|
|
4509
|
-
/* @__PURE__ */
|
|
4701
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "styles", label: "Styles" }),
|
|
4702
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "block-configuration", label: "Inspect" }),
|
|
4703
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "variables", label: "Variables" }),
|
|
4704
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "template-settings", label: "Settings" })
|
|
4510
4705
|
))),
|
|
4511
|
-
/* @__PURE__ */
|
|
4706
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
4512
4707
|
);
|
|
4513
4708
|
}
|
|
4514
4709
|
var SnackbarContext = createContext(null);
|
|
@@ -4529,7 +4724,7 @@ function SnackbarProvider({ children }) {
|
|
|
4529
4724
|
const handleClose = () => {
|
|
4530
4725
|
setMessage(null);
|
|
4531
4726
|
};
|
|
4532
|
-
return /* @__PURE__ */
|
|
4727
|
+
return /* @__PURE__ */ React57.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React57.createElement(
|
|
4533
4728
|
Snackbar,
|
|
4534
4729
|
{
|
|
4535
4730
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4588,11 +4783,12 @@ function TemplateRow({
|
|
|
4588
4783
|
fn == null ? void 0 : fn();
|
|
4589
4784
|
};
|
|
4590
4785
|
const handleClick = () => __async(null, null, function* () {
|
|
4786
|
+
var _a;
|
|
4591
4787
|
try {
|
|
4592
4788
|
const content = yield templateLoader();
|
|
4593
4789
|
if (content) {
|
|
4594
4790
|
resetDocument(content);
|
|
4595
|
-
setCurrentTemplate(template.id, template.slug, template.kind);
|
|
4791
|
+
setCurrentTemplate(template.id, template.slug, template.kind, (_a = template.tags) != null ? _a : []);
|
|
4596
4792
|
}
|
|
4597
4793
|
} catch (error) {
|
|
4598
4794
|
console.error("Error loading template:", error);
|
|
@@ -4605,7 +4801,7 @@ function TemplateRow({
|
|
|
4605
4801
|
const hasActions = Boolean(
|
|
4606
4802
|
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
4607
4803
|
);
|
|
4608
|
-
return /* @__PURE__ */
|
|
4804
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4609
4805
|
Box,
|
|
4610
4806
|
{
|
|
4611
4807
|
role: "button",
|
|
@@ -4631,7 +4827,7 @@ function TemplateRow({
|
|
|
4631
4827
|
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
4632
4828
|
}
|
|
4633
4829
|
},
|
|
4634
|
-
/* @__PURE__ */
|
|
4830
|
+
/* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React57.createElement(Box, { sx: { flexGrow: 1, minWidth: 0, pr: hasActions ? 3 : 0 } }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React57.createElement(
|
|
4635
4831
|
Typography,
|
|
4636
4832
|
{
|
|
4637
4833
|
variant: "body2",
|
|
@@ -4645,14 +4841,14 @@ function TemplateRow({
|
|
|
4645
4841
|
title: template.slug
|
|
4646
4842
|
},
|
|
4647
4843
|
template.slug
|
|
4648
|
-
), updated && !hasActions && /* @__PURE__ */
|
|
4844
|
+
), updated && !hasActions && /* @__PURE__ */ React57.createElement(
|
|
4649
4845
|
Typography,
|
|
4650
4846
|
{
|
|
4651
4847
|
variant: "caption",
|
|
4652
4848
|
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
4653
4849
|
},
|
|
4654
4850
|
updated
|
|
4655
|
-
)), template.description && /* @__PURE__ */
|
|
4851
|
+
)), template.description && /* @__PURE__ */ React57.createElement(
|
|
4656
4852
|
Typography,
|
|
4657
4853
|
{
|
|
4658
4854
|
variant: "caption",
|
|
@@ -4666,7 +4862,7 @@ function TemplateRow({
|
|
|
4666
4862
|
}
|
|
4667
4863
|
},
|
|
4668
4864
|
template.description
|
|
4669
|
-
), template.tags && template.tags.length > 0 && /* @__PURE__ */
|
|
4865
|
+
), template.tags && template.tags.length > 0 && /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React57.createElement(
|
|
4670
4866
|
Chip,
|
|
4671
4867
|
{
|
|
4672
4868
|
key: tag,
|
|
@@ -4675,7 +4871,7 @@ function TemplateRow({
|
|
|
4675
4871
|
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
4676
4872
|
}
|
|
4677
4873
|
))))),
|
|
4678
|
-
hasActions && /* @__PURE__ */
|
|
4874
|
+
hasActions && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(Tooltip, { title: "More" }, /* @__PURE__ */ React57.createElement(
|
|
4679
4875
|
IconButton,
|
|
4680
4876
|
{
|
|
4681
4877
|
size: "small",
|
|
@@ -4691,8 +4887,8 @@ function TemplateRow({
|
|
|
4691
4887
|
transition: "opacity 120ms"
|
|
4692
4888
|
}
|
|
4693
4889
|
},
|
|
4694
|
-
/* @__PURE__ */
|
|
4695
|
-
)), /* @__PURE__ */
|
|
4890
|
+
/* @__PURE__ */ React57.createElement(MoreVertOutlined, { fontSize: "small" })
|
|
4891
|
+
)), /* @__PURE__ */ React57.createElement(
|
|
4696
4892
|
Menu,
|
|
4697
4893
|
{
|
|
4698
4894
|
anchorEl: menuAnchor,
|
|
@@ -4703,14 +4899,14 @@ function TemplateRow({
|
|
|
4703
4899
|
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
4704
4900
|
slotProps: { paper: { sx: { minWidth: 200 } } }
|
|
4705
4901
|
},
|
|
4706
|
-
onRename && /* @__PURE__ */
|
|
4707
|
-
onDuplicate && /* @__PURE__ */
|
|
4708
|
-
onDuplicateAsTemplate && /* @__PURE__ */
|
|
4709
|
-
onPromote && /* @__PURE__ */
|
|
4710
|
-
onDemote && /* @__PURE__ */
|
|
4902
|
+
onRename && /* @__PURE__ */ React57.createElement(MenuItem, { onClick: runAction(onRename) }, /* @__PURE__ */ React57.createElement(ListItemIcon, null, /* @__PURE__ */ React57.createElement(DriveFileRenameOutlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(ListItemText, null, "Edit name & tags\u2026")),
|
|
4903
|
+
onDuplicate && /* @__PURE__ */ React57.createElement(MenuItem, { onClick: runAction(onDuplicate) }, /* @__PURE__ */ React57.createElement(ListItemIcon, null, /* @__PURE__ */ React57.createElement(ContentCopyOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(ListItemText, null, "Duplicate")),
|
|
4904
|
+
onDuplicateAsTemplate && /* @__PURE__ */ React57.createElement(MenuItem, { onClick: runAction(onDuplicateAsTemplate) }, /* @__PURE__ */ React57.createElement(ListItemIcon, null, /* @__PURE__ */ React57.createElement(LibraryAddOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(ListItemText, null, "Duplicate as template")),
|
|
4905
|
+
onPromote && /* @__PURE__ */ React57.createElement(MenuItem, { onClick: runAction(onPromote) }, /* @__PURE__ */ React57.createElement(ListItemIcon, null, /* @__PURE__ */ React57.createElement(FileUploadOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(ListItemText, null, "Promote to sample")),
|
|
4906
|
+
onDemote && /* @__PURE__ */ React57.createElement(MenuItem, { onClick: runAction(onDemote) }, /* @__PURE__ */ React57.createElement(ListItemIcon, null, /* @__PURE__ */ React57.createElement(FileDownloadOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(ListItemText, null, "Demote to template")),
|
|
4711
4907
|
onDelete && [
|
|
4712
|
-
/* @__PURE__ */
|
|
4713
|
-
/* @__PURE__ */
|
|
4908
|
+
/* @__PURE__ */ React57.createElement(Divider$1, { key: "divider" }),
|
|
4909
|
+
/* @__PURE__ */ React57.createElement(MenuItem, { key: "delete", onClick: runAction(onDelete), sx: { color: "error.main" } }, /* @__PURE__ */ React57.createElement(ListItemIcon, { sx: { color: "error.main" } }, /* @__PURE__ */ React57.createElement(DeleteOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(ListItemText, null, "Delete"))
|
|
4714
4910
|
]
|
|
4715
4911
|
))
|
|
4716
4912
|
);
|
|
@@ -4825,31 +5021,31 @@ var PREVIEW_MAX = 36;
|
|
|
4825
5021
|
function iconForType(type) {
|
|
4826
5022
|
switch (type) {
|
|
4827
5023
|
case "EmailLayout":
|
|
4828
|
-
return /* @__PURE__ */
|
|
5024
|
+
return /* @__PURE__ */ React57.createElement(DashboardOutlined, { fontSize: "small" });
|
|
4829
5025
|
case "Heading":
|
|
4830
|
-
return /* @__PURE__ */
|
|
5026
|
+
return /* @__PURE__ */ React57.createElement(HMobiledataOutlined, { fontSize: "small" });
|
|
4831
5027
|
case "Text":
|
|
4832
|
-
return /* @__PURE__ */
|
|
5028
|
+
return /* @__PURE__ */ React57.createElement(NotesOutlined, { fontSize: "small" });
|
|
4833
5029
|
case "Button":
|
|
4834
|
-
return /* @__PURE__ */
|
|
5030
|
+
return /* @__PURE__ */ React57.createElement(SmartButtonOutlined, { fontSize: "small" });
|
|
4835
5031
|
case "Image":
|
|
4836
|
-
return /* @__PURE__ */
|
|
5032
|
+
return /* @__PURE__ */ React57.createElement(ImageOutlined, { fontSize: "small" });
|
|
4837
5033
|
case "Avatar":
|
|
4838
|
-
return /* @__PURE__ */
|
|
5034
|
+
return /* @__PURE__ */ React57.createElement(AccountCircleOutlined, { fontSize: "small" });
|
|
4839
5035
|
case "Signature":
|
|
4840
|
-
return /* @__PURE__ */
|
|
5036
|
+
return /* @__PURE__ */ React57.createElement(ContactMailOutlined, { fontSize: "small" });
|
|
4841
5037
|
case "Divider":
|
|
4842
|
-
return /* @__PURE__ */
|
|
5038
|
+
return /* @__PURE__ */ React57.createElement(HorizontalRuleOutlined, { fontSize: "small" });
|
|
4843
5039
|
case "Spacer":
|
|
4844
|
-
return /* @__PURE__ */
|
|
5040
|
+
return /* @__PURE__ */ React57.createElement(Crop32Outlined, { fontSize: "small" });
|
|
4845
5041
|
case "Html":
|
|
4846
|
-
return /* @__PURE__ */
|
|
5042
|
+
return /* @__PURE__ */ React57.createElement(HtmlOutlined, { fontSize: "small" });
|
|
4847
5043
|
case "Container":
|
|
4848
|
-
return /* @__PURE__ */
|
|
5044
|
+
return /* @__PURE__ */ React57.createElement(LibraryAddOutlined, { fontSize: "small" });
|
|
4849
5045
|
case "ColumnsContainer":
|
|
4850
|
-
return /* @__PURE__ */
|
|
5046
|
+
return /* @__PURE__ */ React57.createElement(ViewColumnOutlined, { fontSize: "small" });
|
|
4851
5047
|
default:
|
|
4852
|
-
return /* @__PURE__ */
|
|
5048
|
+
return /* @__PURE__ */ React57.createElement(BusinessOutlined, { fontSize: "small" });
|
|
4853
5049
|
}
|
|
4854
5050
|
}
|
|
4855
5051
|
function previewText(text) {
|
|
@@ -4927,7 +5123,7 @@ function buildNode(id, doc, ctx) {
|
|
|
4927
5123
|
id: `${id}::col${colIdx}`,
|
|
4928
5124
|
label: `Column ${colIdx + 1}`,
|
|
4929
5125
|
preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
|
|
4930
|
-
icon: /* @__PURE__ */
|
|
5126
|
+
icon: /* @__PURE__ */ React57.createElement(ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
|
|
4931
5127
|
children: colChildren,
|
|
4932
5128
|
containerChildrenRef: parentForCol
|
|
4933
5129
|
});
|
|
@@ -4989,7 +5185,7 @@ function OutlinePanel() {
|
|
|
4989
5185
|
setSelectedBlockId(payload.sourceId);
|
|
4990
5186
|
}
|
|
4991
5187
|
};
|
|
4992
|
-
return /* @__PURE__ */
|
|
5188
|
+
return /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5, px: 0.5 } }, "Outline"), /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { display: "block", color: "text.secondary", px: 0.5, mb: 1 } }, "Click a row to select. Drag a row to reorder or move it into a container."), tree ? /* @__PURE__ */ React57.createElement(
|
|
4993
5189
|
OutlineRow,
|
|
4994
5190
|
{
|
|
4995
5191
|
node: tree,
|
|
@@ -5000,7 +5196,7 @@ function OutlinePanel() {
|
|
|
5000
5196
|
setDragging,
|
|
5001
5197
|
performMove
|
|
5002
5198
|
}
|
|
5003
|
-
) : /* @__PURE__ */
|
|
5199
|
+
) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
|
|
5004
5200
|
}
|
|
5005
5201
|
function OutlineRow({
|
|
5006
5202
|
node,
|
|
@@ -5086,7 +5282,7 @@ function OutlineRow({
|
|
|
5086
5282
|
const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
|
|
5087
5283
|
if (patch) setDocument(patch);
|
|
5088
5284
|
};
|
|
5089
|
-
return /* @__PURE__ */
|
|
5285
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(Box, { sx: { position: "relative" } }, dropPos === "before" && /* @__PURE__ */ React57.createElement(DropLine, { depth }), /* @__PURE__ */ React57.createElement(
|
|
5090
5286
|
Stack,
|
|
5091
5287
|
{
|
|
5092
5288
|
direction: "row",
|
|
@@ -5119,7 +5315,7 @@ function OutlineRow({
|
|
|
5119
5315
|
userSelect: "none"
|
|
5120
5316
|
}
|
|
5121
5317
|
},
|
|
5122
|
-
hasChildren ? /* @__PURE__ */
|
|
5318
|
+
hasChildren ? /* @__PURE__ */ React57.createElement(
|
|
5123
5319
|
Box,
|
|
5124
5320
|
{
|
|
5125
5321
|
role: "button",
|
|
@@ -5130,9 +5326,9 @@ function OutlineRow({
|
|
|
5130
5326
|
},
|
|
5131
5327
|
sx: { display: "flex", alignItems: "center", cursor: "pointer" }
|
|
5132
5328
|
},
|
|
5133
|
-
expanded ? /* @__PURE__ */
|
|
5134
|
-
) : /* @__PURE__ */
|
|
5135
|
-
/* @__PURE__ */
|
|
5329
|
+
expanded ? /* @__PURE__ */ React57.createElement(ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React57.createElement(ChevronRight, { fontSize: "small" })
|
|
5330
|
+
) : /* @__PURE__ */ React57.createElement(Box, { sx: { width: 20 } }),
|
|
5331
|
+
/* @__PURE__ */ React57.createElement(
|
|
5136
5332
|
Box,
|
|
5137
5333
|
{
|
|
5138
5334
|
sx: {
|
|
@@ -5144,7 +5340,7 @@ function OutlineRow({
|
|
|
5144
5340
|
},
|
|
5145
5341
|
node.icon
|
|
5146
5342
|
),
|
|
5147
|
-
/* @__PURE__ */
|
|
5343
|
+
/* @__PURE__ */ React57.createElement(
|
|
5148
5344
|
Typography,
|
|
5149
5345
|
{
|
|
5150
5346
|
variant: "body2",
|
|
@@ -5156,7 +5352,7 @@ function OutlineRow({
|
|
|
5156
5352
|
},
|
|
5157
5353
|
node.label
|
|
5158
5354
|
),
|
|
5159
|
-
node.preview && /* @__PURE__ */
|
|
5355
|
+
node.preview && /* @__PURE__ */ React57.createElement(
|
|
5160
5356
|
Typography,
|
|
5161
5357
|
{
|
|
5162
5358
|
variant: "body2",
|
|
@@ -5172,7 +5368,7 @@ function OutlineRow({
|
|
|
5172
5368
|
"\u2014 ",
|
|
5173
5369
|
node.preview
|
|
5174
5370
|
),
|
|
5175
|
-
canMove && /* @__PURE__ */
|
|
5371
|
+
canMove && /* @__PURE__ */ React57.createElement(
|
|
5176
5372
|
Box,
|
|
5177
5373
|
{
|
|
5178
5374
|
className: "outline-move-btns",
|
|
@@ -5183,7 +5379,7 @@ function OutlineRow({
|
|
|
5183
5379
|
transition: "opacity 120ms"
|
|
5184
5380
|
}
|
|
5185
5381
|
},
|
|
5186
|
-
/* @__PURE__ */
|
|
5382
|
+
/* @__PURE__ */ React57.createElement(Tooltip, { title: "Move up" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
5187
5383
|
IconButton,
|
|
5188
5384
|
{
|
|
5189
5385
|
size: "small",
|
|
@@ -5195,9 +5391,9 @@ function OutlineRow({
|
|
|
5195
5391
|
"aria-label": `Move ${node.label} up`,
|
|
5196
5392
|
sx: { p: 0.25 }
|
|
5197
5393
|
},
|
|
5198
|
-
/* @__PURE__ */
|
|
5394
|
+
/* @__PURE__ */ React57.createElement(KeyboardArrowUp, { fontSize: "small" })
|
|
5199
5395
|
))),
|
|
5200
|
-
/* @__PURE__ */
|
|
5396
|
+
/* @__PURE__ */ React57.createElement(Tooltip, { title: "Move down" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
5201
5397
|
IconButton,
|
|
5202
5398
|
{
|
|
5203
5399
|
size: "small",
|
|
@@ -5209,10 +5405,10 @@ function OutlineRow({
|
|
|
5209
5405
|
"aria-label": `Move ${node.label} down`,
|
|
5210
5406
|
sx: { p: 0.25 }
|
|
5211
5407
|
},
|
|
5212
|
-
/* @__PURE__ */
|
|
5408
|
+
/* @__PURE__ */ React57.createElement(KeyboardArrowDown, { fontSize: "small" })
|
|
5213
5409
|
)))
|
|
5214
5410
|
)
|
|
5215
|
-
), dropPos === "after" && /* @__PURE__ */
|
|
5411
|
+
), dropPos === "after" && /* @__PURE__ */ React57.createElement(DropLine, { depth })), hasChildren && expanded && /* @__PURE__ */ React57.createElement(Box, null, node.children.map((child) => /* @__PURE__ */ React57.createElement(
|
|
5216
5412
|
OutlineRow,
|
|
5217
5413
|
{
|
|
5218
5414
|
key: child.id,
|
|
@@ -5227,7 +5423,7 @@ function OutlineRow({
|
|
|
5227
5423
|
))));
|
|
5228
5424
|
}
|
|
5229
5425
|
function DropLine({ depth }) {
|
|
5230
|
-
return /* @__PURE__ */
|
|
5426
|
+
return /* @__PURE__ */ React57.createElement(
|
|
5231
5427
|
Box,
|
|
5232
5428
|
{
|
|
5233
5429
|
sx: {
|
|
@@ -5235,7 +5431,7 @@ function DropLine({ depth }) {
|
|
|
5235
5431
|
height: 0
|
|
5236
5432
|
}
|
|
5237
5433
|
},
|
|
5238
|
-
/* @__PURE__ */
|
|
5434
|
+
/* @__PURE__ */ React57.createElement(
|
|
5239
5435
|
Box,
|
|
5240
5436
|
{
|
|
5241
5437
|
sx: {
|
|
@@ -5296,7 +5492,7 @@ function NewTemplatePickerDialog({
|
|
|
5296
5492
|
}
|
|
5297
5493
|
});
|
|
5298
5494
|
const pickable = samples.filter((s) => s.id !== "empty-email");
|
|
5299
|
-
return /* @__PURE__ */
|
|
5495
|
+
return /* @__PURE__ */ React57.createElement(Dialog, { open, onClose: busy ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React57.createElement(DialogTitle, null, kind === "sample" ? "New sample" : "New template"), /* @__PURE__ */ React57.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React57.createElement(Typography, { variant: "subtitle2", sx: { mb: 1 } }, "Start from"), /* @__PURE__ */ React57.createElement(
|
|
5300
5496
|
List,
|
|
5301
5497
|
{
|
|
5302
5498
|
dense: true,
|
|
@@ -5310,24 +5506,24 @@ function NewTemplatePickerDialog({
|
|
|
5310
5506
|
overflowY: "auto"
|
|
5311
5507
|
}
|
|
5312
5508
|
},
|
|
5313
|
-
/* @__PURE__ */
|
|
5509
|
+
/* @__PURE__ */ React57.createElement(
|
|
5314
5510
|
ListItemButton,
|
|
5315
5511
|
{
|
|
5316
5512
|
selected: selectedStarter === null,
|
|
5317
5513
|
onClick: () => setSelectedStarter(null)
|
|
5318
5514
|
},
|
|
5319
|
-
/* @__PURE__ */
|
|
5515
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React57.createElement(InsertDriveFileOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React57.createElement(ListItemText, { primary: "Blank", secondary: "Start from an empty email" }))
|
|
5320
5516
|
),
|
|
5321
|
-
pickable.map((s) => /* @__PURE__ */
|
|
5517
|
+
pickable.map((s) => /* @__PURE__ */ React57.createElement(
|
|
5322
5518
|
ListItemButton,
|
|
5323
5519
|
{
|
|
5324
5520
|
key: s.id,
|
|
5325
5521
|
selected: selectedStarter === s.id,
|
|
5326
5522
|
onClick: () => setSelectedStarter(s.id)
|
|
5327
5523
|
},
|
|
5328
|
-
/* @__PURE__ */
|
|
5524
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React57.createElement(DescriptionOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React57.createElement(ListItemText, { primary: s.slug, secondary: s.description }))
|
|
5329
5525
|
))
|
|
5330
|
-
), /* @__PURE__ */
|
|
5526
|
+
), /* @__PURE__ */ React57.createElement(
|
|
5331
5527
|
TextField,
|
|
5332
5528
|
{
|
|
5333
5529
|
autoFocus: true,
|
|
@@ -5346,7 +5542,7 @@ function NewTemplatePickerDialog({
|
|
|
5346
5542
|
helperText: error != null ? error : " ",
|
|
5347
5543
|
disabled: busy
|
|
5348
5544
|
}
|
|
5349
|
-
)), /* @__PURE__ */
|
|
5545
|
+
)), /* @__PURE__ */ React57.createElement(DialogActions, null, /* @__PURE__ */ React57.createElement(Button$1, { onClick: onClose, disabled: busy }, "Cancel"), /* @__PURE__ */ React57.createElement(Button$1, { variant: "contained", onClick: handleCreate, disabled: busy }, busy ? "Creating\u2026" : `Create ${kind}`)));
|
|
5350
5546
|
}
|
|
5351
5547
|
function RenameDialog({
|
|
5352
5548
|
open,
|
|
@@ -5373,15 +5569,15 @@ function RenameDialog({
|
|
|
5373
5569
|
const addTag = () => {
|
|
5374
5570
|
const trimmed = tagInput.trim();
|
|
5375
5571
|
if (!trimmed) return;
|
|
5376
|
-
if (tags.some((
|
|
5572
|
+
if (tags.some((t2) => t2.toLowerCase() === trimmed.toLowerCase())) {
|
|
5377
5573
|
setTagInput("");
|
|
5378
5574
|
return;
|
|
5379
5575
|
}
|
|
5380
5576
|
setTags([...tags, trimmed]);
|
|
5381
5577
|
setTagInput("");
|
|
5382
5578
|
};
|
|
5383
|
-
const removeTag = (tag) => setTags(tags.filter((
|
|
5384
|
-
const tagsUnchanged = tags.length === currentTags.length && tags.every((
|
|
5579
|
+
const removeTag = (tag) => setTags(tags.filter((t2) => t2 !== tag));
|
|
5580
|
+
const tagsUnchanged = tags.length === currentTags.length && tags.every((t2, i) => t2 === currentTags[i]);
|
|
5385
5581
|
const handleSubmit = () => __async(null, null, function* () {
|
|
5386
5582
|
const trimmedSlug = slug.trim();
|
|
5387
5583
|
if (!trimmedSlug) {
|
|
@@ -5408,7 +5604,7 @@ function RenameDialog({
|
|
|
5408
5604
|
setSubmitting(false);
|
|
5409
5605
|
}
|
|
5410
5606
|
});
|
|
5411
|
-
return /* @__PURE__ */
|
|
5607
|
+
return /* @__PURE__ */ React57.createElement(Dialog, { open, onClose: submitting ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React57.createElement(DialogTitle, null, "Edit details"), /* @__PURE__ */ React57.createElement(DialogContent, null, /* @__PURE__ */ React57.createElement(
|
|
5412
5608
|
TextField,
|
|
5413
5609
|
{
|
|
5414
5610
|
autoFocus: true,
|
|
@@ -5428,7 +5624,7 @@ function RenameDialog({
|
|
|
5428
5624
|
if (e.key === "Enter" && !submitting) handleSubmit();
|
|
5429
5625
|
}
|
|
5430
5626
|
}
|
|
5431
|
-
), /* @__PURE__ */
|
|
5627
|
+
), /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 1, mb: 0.5 } }, "Tags"), tags.length > 0 ? /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React57.createElement(
|
|
5432
5628
|
Chip,
|
|
5433
5629
|
{
|
|
5434
5630
|
key: tag,
|
|
@@ -5436,7 +5632,7 @@ function RenameDialog({
|
|
|
5436
5632
|
size: "small",
|
|
5437
5633
|
onDelete: submitting ? void 0 : () => removeTag(tag)
|
|
5438
5634
|
}
|
|
5439
|
-
))) : /* @__PURE__ */
|
|
5635
|
+
))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, "No tags yet. Suggested: ", /* @__PURE__ */ React57.createElement("i", null, "transactional"), ", ", /* @__PURE__ */ React57.createElement("i", null, "marketing"), "."), /* @__PURE__ */ React57.createElement(
|
|
5440
5636
|
TextField,
|
|
5441
5637
|
{
|
|
5442
5638
|
size: "small",
|
|
@@ -5455,20 +5651,20 @@ function RenameDialog({
|
|
|
5455
5651
|
}
|
|
5456
5652
|
},
|
|
5457
5653
|
InputProps: {
|
|
5458
|
-
endAdornment: /* @__PURE__ */
|
|
5654
|
+
endAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React57.createElement(
|
|
5459
5655
|
Button$1,
|
|
5460
5656
|
{
|
|
5461
5657
|
size: "small",
|
|
5462
5658
|
onClick: addTag,
|
|
5463
5659
|
disabled: !tagInput.trim() || submitting,
|
|
5464
|
-
startIcon: /* @__PURE__ */
|
|
5660
|
+
startIcon: /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" }),
|
|
5465
5661
|
sx: { textTransform: "none" }
|
|
5466
5662
|
},
|
|
5467
5663
|
"Add"
|
|
5468
5664
|
))
|
|
5469
5665
|
}
|
|
5470
5666
|
}
|
|
5471
|
-
), /* @__PURE__ */
|
|
5667
|
+
), /* @__PURE__ */ React57.createElement(Box, { sx: { minHeight: 8 } })), /* @__PURE__ */ React57.createElement(DialogActions, null, /* @__PURE__ */ React57.createElement(Button$1, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React57.createElement(
|
|
5472
5668
|
Button$1,
|
|
5473
5669
|
{
|
|
5474
5670
|
onClick: handleSubmit,
|
|
@@ -5537,7 +5733,7 @@ function SaveTemplateDialog({
|
|
|
5537
5733
|
setInternalError("");
|
|
5538
5734
|
onClose();
|
|
5539
5735
|
};
|
|
5540
|
-
return /* @__PURE__ */
|
|
5736
|
+
return /* @__PURE__ */ React57.createElement(
|
|
5541
5737
|
Dialog,
|
|
5542
5738
|
{
|
|
5543
5739
|
open,
|
|
@@ -5545,8 +5741,8 @@ function SaveTemplateDialog({
|
|
|
5545
5741
|
maxWidth: "sm",
|
|
5546
5742
|
fullWidth: true
|
|
5547
5743
|
},
|
|
5548
|
-
/* @__PURE__ */
|
|
5549
|
-
/* @__PURE__ */
|
|
5744
|
+
/* @__PURE__ */ React57.createElement(DialogTitle, null, "Save Email Template"),
|
|
5745
|
+
/* @__PURE__ */ React57.createElement(DialogContent, null, /* @__PURE__ */ React57.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React57.createElement(
|
|
5550
5746
|
TextField,
|
|
5551
5747
|
{
|
|
5552
5748
|
autoFocus: true,
|
|
@@ -5568,7 +5764,7 @@ function SaveTemplateDialog({
|
|
|
5568
5764
|
disabled: isSubmitting
|
|
5569
5765
|
}
|
|
5570
5766
|
))),
|
|
5571
|
-
/* @__PURE__ */
|
|
5767
|
+
/* @__PURE__ */ React57.createElement(DialogActions, null, /* @__PURE__ */ React57.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React57.createElement(
|
|
5572
5768
|
Button$1,
|
|
5573
5769
|
{
|
|
5574
5770
|
onClick: handleSave,
|
|
@@ -5605,9 +5801,9 @@ var EMPTY_TEMPLATE = {
|
|
|
5605
5801
|
description: "A blank email template to start from scratch"
|
|
5606
5802
|
};
|
|
5607
5803
|
var SORT_OPTIONS = [
|
|
5608
|
-
{ value: "updatedAt",
|
|
5609
|
-
{ value: "createdAt",
|
|
5610
|
-
{ value: "slug",
|
|
5804
|
+
{ value: "updatedAt", labelKey: "sort.last-updated", fallback: "Last updated" },
|
|
5805
|
+
{ value: "createdAt", labelKey: "sort.recently-created", fallback: "Recently created" },
|
|
5806
|
+
{ value: "slug", labelKey: "sort.name", fallback: "Name (A\u2013Z)" }
|
|
5611
5807
|
];
|
|
5612
5808
|
function compareTemplates(a, b, key) {
|
|
5613
5809
|
if (key === "slug") {
|
|
@@ -5691,9 +5887,9 @@ function SamplesDrawer({
|
|
|
5691
5887
|
const now = (/* @__PURE__ */ new Date()).toISOString();
|
|
5692
5888
|
const row = { id, slug, kind, tags, createdAt: now, updatedAt: now };
|
|
5693
5889
|
if (kind === "sample") {
|
|
5694
|
-
setSamples((prev) => prev.some((
|
|
5890
|
+
setSamples((prev) => prev.some((t2) => t2.id === id) ? prev : [...prev, row]);
|
|
5695
5891
|
} else {
|
|
5696
|
-
setTemplates((prev) => prev.some((
|
|
5892
|
+
setTemplates((prev) => prev.some((t2) => t2.id === id) ? prev : [...prev, row]);
|
|
5697
5893
|
}
|
|
5698
5894
|
};
|
|
5699
5895
|
useEffect(() => {
|
|
@@ -5711,30 +5907,30 @@ function SamplesDrawer({
|
|
|
5711
5907
|
const { templateRows, sampleRows } = useMemo(() => {
|
|
5712
5908
|
const byId = /* @__PURE__ */ new Map();
|
|
5713
5909
|
for (const s of samples) byId.set(s.id, s);
|
|
5714
|
-
for (const
|
|
5910
|
+
for (const t2 of templates) byId.set(t2.id, t2);
|
|
5715
5911
|
const all = Array.from(byId.values());
|
|
5716
5912
|
return {
|
|
5717
|
-
templateRows: all.filter((
|
|
5718
|
-
sampleRows: all.filter((
|
|
5913
|
+
templateRows: all.filter((t2) => t2.kind === "template"),
|
|
5914
|
+
sampleRows: all.filter((t2) => t2.kind === "sample")
|
|
5719
5915
|
};
|
|
5720
5916
|
}, [samples, templates]);
|
|
5721
5917
|
const allTags = useMemo(() => {
|
|
5722
5918
|
var _a2, _b2;
|
|
5723
5919
|
const set = /* @__PURE__ */ new Set();
|
|
5724
|
-
for (const
|
|
5920
|
+
for (const t2 of templateRows) (_a2 = t2.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
5725
5921
|
for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
|
|
5726
5922
|
return Array.from(set).sort();
|
|
5727
5923
|
}, [templateRows, sampleRows]);
|
|
5728
5924
|
const matchesSearchAndTags = useMemo(() => {
|
|
5729
5925
|
const term = search.trim().toLowerCase();
|
|
5730
|
-
return (
|
|
5926
|
+
return (t2) => {
|
|
5731
5927
|
if (term) {
|
|
5732
|
-
const haystack = [
|
|
5928
|
+
const haystack = [t2.slug, t2.description, t2.subject].filter(Boolean).join(" ").toLowerCase();
|
|
5733
5929
|
if (!haystack.includes(term)) return false;
|
|
5734
5930
|
}
|
|
5735
5931
|
if (activeTags.length > 0) {
|
|
5736
|
-
if (!
|
|
5737
|
-
if (!activeTags.every((tag) =>
|
|
5932
|
+
if (!t2.tags || t2.tags.length === 0) return false;
|
|
5933
|
+
if (!activeTags.every((tag) => t2.tags.includes(tag))) return false;
|
|
5738
5934
|
}
|
|
5739
5935
|
return true;
|
|
5740
5936
|
};
|
|
@@ -5748,7 +5944,7 @@ function SamplesDrawer({
|
|
|
5748
5944
|
[sampleRows, matchesSearchAndTags, sortKey]
|
|
5749
5945
|
);
|
|
5750
5946
|
const toggleTag = (tag) => {
|
|
5751
|
-
setActiveTags((prev) => prev.includes(tag) ? prev.filter((
|
|
5947
|
+
setActiveTags((prev) => prev.includes(tag) ? prev.filter((t2) => t2 !== tag) : [...prev, tag]);
|
|
5752
5948
|
};
|
|
5753
5949
|
const handleDuplicate = (template) => {
|
|
5754
5950
|
if (!copyTemplate) return;
|
|
@@ -5774,22 +5970,21 @@ function SamplesDrawer({
|
|
|
5774
5970
|
showMessage("Template deleted");
|
|
5775
5971
|
};
|
|
5776
5972
|
const handleRenameSubmit = (newSlug, opts) => __async(null, null, function* () {
|
|
5973
|
+
var _a2, _b2;
|
|
5777
5974
|
if (!renameTarget || !renameTemplate) return;
|
|
5778
5975
|
yield renameTemplate(renameTarget.id, newSlug, opts);
|
|
5779
|
-
const
|
|
5780
|
-
|
|
5781
|
-
return t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : t.tags }) : t;
|
|
5782
|
-
};
|
|
5976
|
+
const newTags = (_b2 = (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : renameTarget.tags) != null ? _b2 : [];
|
|
5977
|
+
const patch = (t2) => t2.id === renameTarget.id ? __spreadProps(__spreadValues({}, t2), { slug: newSlug, tags: newTags }) : t2;
|
|
5783
5978
|
setTemplates((prev) => prev.map(patch));
|
|
5784
5979
|
setSamples((prev) => prev.map(patch));
|
|
5785
5980
|
if (currentTemplateId === renameTarget.id) {
|
|
5786
|
-
setCurrentTemplate(renameTarget.id, newSlug);
|
|
5981
|
+
setCurrentTemplate(renameTarget.id, newSlug, void 0, newTags);
|
|
5787
5982
|
}
|
|
5788
5983
|
showMessage("Details saved");
|
|
5789
5984
|
});
|
|
5790
5985
|
const flipKindLocally = (id, kind) => {
|
|
5791
|
-
setTemplates((prev) => prev.map((
|
|
5792
|
-
setSamples((prev) => prev.map((
|
|
5986
|
+
setTemplates((prev) => prev.map((t2) => t2.id === id ? __spreadProps(__spreadValues({}, t2), { kind }) : t2));
|
|
5987
|
+
setSamples((prev) => prev.map((t2) => t2.id === id ? __spreadProps(__spreadValues({}, t2), { kind }) : t2));
|
|
5793
5988
|
};
|
|
5794
5989
|
const handleSetKind = (template, kind) => {
|
|
5795
5990
|
if (!setTemplateKind) return;
|
|
@@ -5826,7 +6021,7 @@ function SamplesDrawer({
|
|
|
5826
6021
|
};
|
|
5827
6022
|
const handleSaveAsSubmit = (templateName) => __async(null, null, function* () {
|
|
5828
6023
|
if (!saveAs || !pendingSaveAs) return false;
|
|
5829
|
-
const taken = templateRows.some((
|
|
6024
|
+
const taken = templateRows.some((t2) => t2.slug.toLowerCase() === templateName.toLowerCase());
|
|
5830
6025
|
if (taken) {
|
|
5831
6026
|
setNewError("A template with this name already exists");
|
|
5832
6027
|
return false;
|
|
@@ -5889,8 +6084,8 @@ function SamplesDrawer({
|
|
|
5889
6084
|
if (!enabled) {
|
|
5890
6085
|
return null;
|
|
5891
6086
|
}
|
|
5892
|
-
const existingSlugs = templates.map((
|
|
5893
|
-
return /* @__PURE__ */
|
|
6087
|
+
const existingSlugs = templates.map((t2) => t2.slug);
|
|
6088
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
5894
6089
|
Drawer,
|
|
5895
6090
|
{
|
|
5896
6091
|
variant: "persistent",
|
|
@@ -5905,7 +6100,7 @@ function SamplesDrawer({
|
|
|
5905
6100
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
5906
6101
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
5907
6102
|
},
|
|
5908
|
-
/* @__PURE__ */
|
|
6103
|
+
/* @__PURE__ */ React57.createElement(
|
|
5909
6104
|
Stack,
|
|
5910
6105
|
{
|
|
5911
6106
|
py: 1,
|
|
@@ -5915,16 +6110,16 @@ function SamplesDrawer({
|
|
|
5915
6110
|
spacing: 1.5,
|
|
5916
6111
|
sx: { overflowY: "auto" }
|
|
5917
6112
|
},
|
|
5918
|
-
/* @__PURE__ */
|
|
6113
|
+
/* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React57.createElement(Typography, { variant: "h6", component: "h1" }, /* @__PURE__ */ React57.createElement(Trans, { id: "drawer.library" }, "Library")), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React57.createElement(Tooltip, { title: activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template") }, /* @__PURE__ */ React57.createElement(
|
|
5919
6114
|
IconButton,
|
|
5920
6115
|
{
|
|
5921
6116
|
size: "small",
|
|
5922
6117
|
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
5923
|
-
"aria-label": activeLeftTab === "samples" ? "New sample" : "New template"
|
|
6118
|
+
"aria-label": activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template")
|
|
5924
6119
|
},
|
|
5925
|
-
/* @__PURE__ */
|
|
6120
|
+
/* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" })
|
|
5926
6121
|
))),
|
|
5927
|
-
/* @__PURE__ */
|
|
6122
|
+
/* @__PURE__ */ React57.createElement(
|
|
5928
6123
|
Tabs,
|
|
5929
6124
|
{
|
|
5930
6125
|
value: activeLeftTab,
|
|
@@ -5932,42 +6127,42 @@ function SamplesDrawer({
|
|
|
5932
6127
|
variant: "fullWidth",
|
|
5933
6128
|
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
5934
6129
|
},
|
|
5935
|
-
/* @__PURE__ */
|
|
5936
|
-
/* @__PURE__ */
|
|
5937
|
-
/* @__PURE__ */
|
|
6130
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "templates", label: t("drawer.tab.templates", "Templates"), disabled: !loadTemplates }),
|
|
6131
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "samples", label: t("drawer.tab.samples", "Samples") }),
|
|
6132
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "outline", label: t("drawer.tab.outline", "Outline") })
|
|
5938
6133
|
),
|
|
5939
|
-
activeLeftTab === "outline" ? /* @__PURE__ */
|
|
6134
|
+
activeLeftTab === "outline" ? /* @__PURE__ */ React57.createElement(OutlinePanel, null) : /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
5940
6135
|
TextField,
|
|
5941
6136
|
{
|
|
5942
6137
|
size: "small",
|
|
5943
|
-
placeholder: activeLeftTab === "templates" ? "Search templates" : "Search samples",
|
|
6138
|
+
placeholder: activeLeftTab === "templates" ? t("drawer.search-templates", "Search templates") : t("drawer.search-samples", "Search samples"),
|
|
5944
6139
|
value: search,
|
|
5945
6140
|
onChange: (e) => setSearch(e.target.value),
|
|
5946
6141
|
InputProps: {
|
|
5947
|
-
startAdornment: /* @__PURE__ */
|
|
6142
|
+
startAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React57.createElement(SearchOutlined, { fontSize: "small" }))
|
|
5948
6143
|
}
|
|
5949
6144
|
}
|
|
5950
|
-
), /* @__PURE__ */
|
|
6145
|
+
), /* @__PURE__ */ React57.createElement(
|
|
5951
6146
|
TextField,
|
|
5952
6147
|
{
|
|
5953
6148
|
select: true,
|
|
5954
6149
|
size: "small",
|
|
5955
|
-
label: "Sort by",
|
|
6150
|
+
label: t("drawer.sort-by", "Sort by"),
|
|
5956
6151
|
value: sortKey,
|
|
5957
6152
|
onChange: (e) => setSortKey(e.target.value)
|
|
5958
6153
|
},
|
|
5959
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
5960
|
-
), allTags.length > 0 && /* @__PURE__ */
|
|
6154
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React57.createElement(MenuItem, { key: opt.value, value: opt.value }, t(opt.labelKey, opt.fallback)))
|
|
6155
|
+
), allTags.length > 0 && /* @__PURE__ */ React57.createElement(Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React57.createElement(
|
|
5961
6156
|
Chip,
|
|
5962
6157
|
{
|
|
5963
|
-
label: "All",
|
|
6158
|
+
label: t("drawer.tag.all", "All"),
|
|
5964
6159
|
size: "small",
|
|
5965
6160
|
clickable: true,
|
|
5966
6161
|
color: activeTags.length === 0 ? "primary" : "default",
|
|
5967
6162
|
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
5968
6163
|
onClick: () => setActiveTags([])
|
|
5969
6164
|
}
|
|
5970
|
-
), allTags.map((tag) => /* @__PURE__ */
|
|
6165
|
+
), allTags.map((tag) => /* @__PURE__ */ React57.createElement(
|
|
5971
6166
|
Chip,
|
|
5972
6167
|
{
|
|
5973
6168
|
key: tag,
|
|
@@ -5978,7 +6173,7 @@ function SamplesDrawer({
|
|
|
5978
6173
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
5979
6174
|
onClick: () => toggleTag(tag)
|
|
5980
6175
|
}
|
|
5981
|
-
))), activeLeftTab === "templates" ? /* @__PURE__ */
|
|
6176
|
+
))), activeLeftTab === "templates" ? /* @__PURE__ */ React57.createElement(Box, null, loadingTemplates ? /* @__PURE__ */ React57.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React57.createElement(CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React57.createElement(Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React57.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React57.createElement(
|
|
5982
6177
|
TemplateRow,
|
|
5983
6178
|
{
|
|
5984
6179
|
key: template.id,
|
|
@@ -5990,7 +6185,7 @@ function SamplesDrawer({
|
|
|
5990
6185
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
5991
6186
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
5992
6187
|
}
|
|
5993
|
-
))) : /* @__PURE__ */
|
|
6188
|
+
))) : /* @__PURE__ */ React57.createElement(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__ */ React57.createElement(Box, null, loadingSamples ? /* @__PURE__ */ React57.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React57.createElement(CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React57.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React57.createElement(
|
|
5994
6189
|
TemplateRow,
|
|
5995
6190
|
{
|
|
5996
6191
|
key: sample.id,
|
|
@@ -6002,9 +6197,9 @@ function SamplesDrawer({
|
|
|
6002
6197
|
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
6003
6198
|
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
6004
6199
|
}
|
|
6005
|
-
))) : /* @__PURE__ */
|
|
6200
|
+
))) : /* @__PURE__ */ React57.createElement(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"))))
|
|
6006
6201
|
)
|
|
6007
|
-
), renameTarget && /* @__PURE__ */
|
|
6202
|
+
), renameTarget && /* @__PURE__ */ React57.createElement(
|
|
6008
6203
|
RenameDialog,
|
|
6009
6204
|
{
|
|
6010
6205
|
open: !!renameTarget,
|
|
@@ -6014,7 +6209,7 @@ function SamplesDrawer({
|
|
|
6014
6209
|
onClose: () => setRenameTarget(null),
|
|
6015
6210
|
onSubmit: handleRenameSubmit
|
|
6016
6211
|
}
|
|
6017
|
-
), /* @__PURE__ */
|
|
6212
|
+
), /* @__PURE__ */ React57.createElement(
|
|
6018
6213
|
SaveTemplateDialog,
|
|
6019
6214
|
{
|
|
6020
6215
|
open: !!pendingSaveAs,
|
|
@@ -6027,13 +6222,13 @@ function SamplesDrawer({
|
|
|
6027
6222
|
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
6028
6223
|
error: newError
|
|
6029
6224
|
}
|
|
6030
|
-
), /* @__PURE__ */
|
|
6225
|
+
), /* @__PURE__ */ React57.createElement(
|
|
6031
6226
|
NewTemplatePickerDialog,
|
|
6032
6227
|
{
|
|
6033
6228
|
open: pickerKind !== null,
|
|
6034
6229
|
kind: pickerKind != null ? pickerKind : "template",
|
|
6035
6230
|
samples: sampleRows,
|
|
6036
|
-
existingSlugs: pickerKind === "sample" ? sampleRows.map((s) => s.slug) : templateRows.map((
|
|
6231
|
+
existingSlugs: pickerKind === "sample" ? sampleRows.map((s) => s.slug) : templateRows.map((t2) => t2.slug),
|
|
6037
6232
|
onClose: () => setPickerKind(null),
|
|
6038
6233
|
onCreate: handleCreateFromPicker
|
|
6039
6234
|
}
|
|
@@ -6051,7 +6246,7 @@ var ICON_SX = {
|
|
|
6051
6246
|
borderColor: "cadet.300"
|
|
6052
6247
|
};
|
|
6053
6248
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
6054
|
-
return /* @__PURE__ */
|
|
6249
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6055
6250
|
Button$1,
|
|
6056
6251
|
{
|
|
6057
6252
|
sx: BUTTON_SX2,
|
|
@@ -6060,14 +6255,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
6060
6255
|
onClick();
|
|
6061
6256
|
}
|
|
6062
6257
|
},
|
|
6063
|
-
/* @__PURE__ */
|
|
6064
|
-
/* @__PURE__ */
|
|
6258
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: ICON_SX }, icon),
|
|
6259
|
+
/* @__PURE__ */ React57.createElement(Typography, { variant: "body2" }, label)
|
|
6065
6260
|
);
|
|
6066
6261
|
}
|
|
6067
6262
|
var BUTTONS = [
|
|
6068
6263
|
{
|
|
6069
6264
|
label: "Heading",
|
|
6070
|
-
icon: /* @__PURE__ */
|
|
6265
|
+
icon: /* @__PURE__ */ React57.createElement(HMobiledataOutlined, null),
|
|
6071
6266
|
block: () => ({
|
|
6072
6267
|
type: "Heading",
|
|
6073
6268
|
data: {
|
|
@@ -6080,7 +6275,7 @@ var BUTTONS = [
|
|
|
6080
6275
|
},
|
|
6081
6276
|
{
|
|
6082
6277
|
label: "Text",
|
|
6083
|
-
icon: /* @__PURE__ */
|
|
6278
|
+
icon: /* @__PURE__ */ React57.createElement(NotesOutlined, null),
|
|
6084
6279
|
block: () => ({
|
|
6085
6280
|
type: "Text",
|
|
6086
6281
|
data: {
|
|
@@ -6094,7 +6289,7 @@ var BUTTONS = [
|
|
|
6094
6289
|
},
|
|
6095
6290
|
{
|
|
6096
6291
|
label: "Button",
|
|
6097
|
-
icon: /* @__PURE__ */
|
|
6292
|
+
icon: /* @__PURE__ */ React57.createElement(SmartButtonOutlined, null),
|
|
6098
6293
|
block: () => ({
|
|
6099
6294
|
type: "Button",
|
|
6100
6295
|
data: {
|
|
@@ -6108,7 +6303,7 @@ var BUTTONS = [
|
|
|
6108
6303
|
},
|
|
6109
6304
|
{
|
|
6110
6305
|
label: "Image",
|
|
6111
|
-
icon: /* @__PURE__ */
|
|
6306
|
+
icon: /* @__PURE__ */ React57.createElement(ImageOutlined, null),
|
|
6112
6307
|
block: () => ({
|
|
6113
6308
|
type: "Image",
|
|
6114
6309
|
data: {
|
|
@@ -6124,7 +6319,7 @@ var BUTTONS = [
|
|
|
6124
6319
|
},
|
|
6125
6320
|
{
|
|
6126
6321
|
label: "Avatar",
|
|
6127
|
-
icon: /* @__PURE__ */
|
|
6322
|
+
icon: /* @__PURE__ */ React57.createElement(AccountCircleOutlined, null),
|
|
6128
6323
|
block: () => ({
|
|
6129
6324
|
type: "Avatar",
|
|
6130
6325
|
data: {
|
|
@@ -6138,7 +6333,7 @@ var BUTTONS = [
|
|
|
6138
6333
|
},
|
|
6139
6334
|
{
|
|
6140
6335
|
label: "Personal Signature",
|
|
6141
|
-
icon: /* @__PURE__ */
|
|
6336
|
+
icon: /* @__PURE__ */ React57.createElement(ContactMailOutlined, null),
|
|
6142
6337
|
block: () => ({
|
|
6143
6338
|
type: "Signature",
|
|
6144
6339
|
data: {
|
|
@@ -6160,7 +6355,7 @@ var BUTTONS = [
|
|
|
6160
6355
|
},
|
|
6161
6356
|
{
|
|
6162
6357
|
label: "Company Signature",
|
|
6163
|
-
icon: /* @__PURE__ */
|
|
6358
|
+
icon: /* @__PURE__ */ React57.createElement(BusinessOutlined, null),
|
|
6164
6359
|
block: () => ({
|
|
6165
6360
|
type: "Signature",
|
|
6166
6361
|
data: {
|
|
@@ -6180,7 +6375,7 @@ var BUTTONS = [
|
|
|
6180
6375
|
},
|
|
6181
6376
|
{
|
|
6182
6377
|
label: "Divider",
|
|
6183
|
-
icon: /* @__PURE__ */
|
|
6378
|
+
icon: /* @__PURE__ */ React57.createElement(HorizontalRuleOutlined, null),
|
|
6184
6379
|
block: () => ({
|
|
6185
6380
|
type: "Divider",
|
|
6186
6381
|
data: {
|
|
@@ -6193,7 +6388,7 @@ var BUTTONS = [
|
|
|
6193
6388
|
},
|
|
6194
6389
|
{
|
|
6195
6390
|
label: "Spacer",
|
|
6196
|
-
icon: /* @__PURE__ */
|
|
6391
|
+
icon: /* @__PURE__ */ React57.createElement(Crop32Outlined, null),
|
|
6197
6392
|
block: () => ({
|
|
6198
6393
|
type: "Spacer",
|
|
6199
6394
|
data: {}
|
|
@@ -6201,7 +6396,7 @@ var BUTTONS = [
|
|
|
6201
6396
|
},
|
|
6202
6397
|
{
|
|
6203
6398
|
label: "Html",
|
|
6204
|
-
icon: /* @__PURE__ */
|
|
6399
|
+
icon: /* @__PURE__ */ React57.createElement(HtmlOutlined, null),
|
|
6205
6400
|
block: () => ({
|
|
6206
6401
|
type: "Html",
|
|
6207
6402
|
data: {
|
|
@@ -6216,7 +6411,7 @@ var BUTTONS = [
|
|
|
6216
6411
|
},
|
|
6217
6412
|
{
|
|
6218
6413
|
label: "Columns",
|
|
6219
|
-
icon: /* @__PURE__ */
|
|
6414
|
+
icon: /* @__PURE__ */ React57.createElement(ViewColumnOutlined, null),
|
|
6220
6415
|
block: () => ({
|
|
6221
6416
|
type: "ColumnsContainer",
|
|
6222
6417
|
data: {
|
|
@@ -6231,7 +6426,7 @@ var BUTTONS = [
|
|
|
6231
6426
|
},
|
|
6232
6427
|
{
|
|
6233
6428
|
label: "Container",
|
|
6234
|
-
icon: /* @__PURE__ */
|
|
6429
|
+
icon: /* @__PURE__ */ React57.createElement(LibraryAddOutlined, null),
|
|
6235
6430
|
block: () => ({
|
|
6236
6431
|
type: "Container",
|
|
6237
6432
|
data: {
|
|
@@ -6255,7 +6450,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6255
6450
|
if (anchorEl === null) {
|
|
6256
6451
|
return null;
|
|
6257
6452
|
}
|
|
6258
|
-
return /* @__PURE__ */
|
|
6453
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6259
6454
|
Menu,
|
|
6260
6455
|
{
|
|
6261
6456
|
open: true,
|
|
@@ -6264,7 +6459,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6264
6459
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
6265
6460
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
6266
6461
|
},
|
|
6267
|
-
/* @__PURE__ */
|
|
6462
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React57.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
|
|
6268
6463
|
);
|
|
6269
6464
|
}
|
|
6270
6465
|
function DividerButton({ buttonElement, onClick }) {
|
|
@@ -6291,7 +6486,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6291
6486
|
window.removeEventListener("mousemove", listener);
|
|
6292
6487
|
};
|
|
6293
6488
|
}, [buttonElement, setVisible]);
|
|
6294
|
-
return /* @__PURE__ */
|
|
6489
|
+
return /* @__PURE__ */ React57.createElement(Fade, { in: visible }, /* @__PURE__ */ React57.createElement(
|
|
6295
6490
|
IconButton,
|
|
6296
6491
|
{
|
|
6297
6492
|
size: "small",
|
|
@@ -6314,11 +6509,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6314
6509
|
onClick();
|
|
6315
6510
|
}
|
|
6316
6511
|
},
|
|
6317
|
-
/* @__PURE__ */
|
|
6512
|
+
/* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" })
|
|
6318
6513
|
));
|
|
6319
6514
|
}
|
|
6320
6515
|
function PlaceholderButton({ onClick }) {
|
|
6321
|
-
return /* @__PURE__ */
|
|
6516
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6322
6517
|
ButtonBase,
|
|
6323
6518
|
{
|
|
6324
6519
|
onClick: (ev) => {
|
|
@@ -6334,7 +6529,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
6334
6529
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
6335
6530
|
}
|
|
6336
6531
|
},
|
|
6337
|
-
/* @__PURE__ */
|
|
6532
|
+
/* @__PURE__ */ React57.createElement(
|
|
6338
6533
|
AddOutlined,
|
|
6339
6534
|
{
|
|
6340
6535
|
sx: {
|
|
@@ -6358,19 +6553,19 @@ function AddBlockButton({ onSelect, placeholder }) {
|
|
|
6358
6553
|
};
|
|
6359
6554
|
const renderButton2 = () => {
|
|
6360
6555
|
if (placeholder) {
|
|
6361
|
-
return /* @__PURE__ */
|
|
6556
|
+
return /* @__PURE__ */ React57.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
6362
6557
|
} else {
|
|
6363
|
-
return /* @__PURE__ */
|
|
6558
|
+
return /* @__PURE__ */ React57.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
6364
6559
|
}
|
|
6365
6560
|
};
|
|
6366
|
-
return /* @__PURE__ */
|
|
6561
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React57.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
6367
6562
|
}
|
|
6368
6563
|
var BlockParentContext = createContext(null);
|
|
6369
6564
|
function BlockParentProvider({
|
|
6370
6565
|
info,
|
|
6371
6566
|
children
|
|
6372
6567
|
}) {
|
|
6373
|
-
return /* @__PURE__ */
|
|
6568
|
+
return /* @__PURE__ */ React57.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6374
6569
|
}
|
|
6375
6570
|
function useBlockParent() {
|
|
6376
6571
|
return useContext(BlockParentContext);
|
|
@@ -6400,9 +6595,9 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6400
6595
|
});
|
|
6401
6596
|
};
|
|
6402
6597
|
if (!childrenIds || childrenIds.length === 0) {
|
|
6403
|
-
return /* @__PURE__ */
|
|
6598
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock }), parentRef && /* @__PURE__ */ React57.createElement(CanvasDropZone, { parentRef, targetIndex: 0, placeholder: true }));
|
|
6404
6599
|
}
|
|
6405
|
-
return /* @__PURE__ */
|
|
6600
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React57.createElement(Fragment, { key: childId }, /* @__PURE__ */ React57.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), parentRef && /* @__PURE__ */ React57.createElement(CanvasDropZone, { parentRef, targetIndex: i }), parentRef ? /* @__PURE__ */ React57.createElement(BlockParentProvider, { info: { parent: parentRef, indexInParent: i } }, /* @__PURE__ */ React57.createElement(EditorBlock, { id: childId })) : /* @__PURE__ */ React57.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React57.createElement(AddBlockButton, { onSelect: appendBlock }), parentRef && /* @__PURE__ */ React57.createElement(CanvasDropZone, { parentRef, targetIndex: childrenIds.length }));
|
|
6406
6601
|
}
|
|
6407
6602
|
function CanvasDropZone({
|
|
6408
6603
|
parentRef,
|
|
@@ -6439,7 +6634,7 @@ function CanvasDropZone({
|
|
|
6439
6634
|
}
|
|
6440
6635
|
setDraggingBlock(null);
|
|
6441
6636
|
};
|
|
6442
|
-
return /* @__PURE__ */
|
|
6637
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6443
6638
|
Box,
|
|
6444
6639
|
{
|
|
6445
6640
|
onDragOver: handleDragOver,
|
|
@@ -6482,13 +6677,13 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6482
6677
|
});
|
|
6483
6678
|
setSelectedBlockId(blockId);
|
|
6484
6679
|
};
|
|
6485
|
-
return /* @__PURE__ */
|
|
6680
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6486
6681
|
columns_container_default,
|
|
6487
6682
|
{
|
|
6488
6683
|
props: restProps,
|
|
6489
6684
|
style,
|
|
6490
6685
|
columns: [
|
|
6491
|
-
/* @__PURE__ */
|
|
6686
|
+
/* @__PURE__ */ React57.createElement(
|
|
6492
6687
|
EditorChildrenIds,
|
|
6493
6688
|
{
|
|
6494
6689
|
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
@@ -6496,7 +6691,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6496
6691
|
onChange: (change) => updateColumn(0, change)
|
|
6497
6692
|
}
|
|
6498
6693
|
),
|
|
6499
|
-
/* @__PURE__ */
|
|
6694
|
+
/* @__PURE__ */ React57.createElement(
|
|
6500
6695
|
EditorChildrenIds,
|
|
6501
6696
|
{
|
|
6502
6697
|
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
@@ -6504,7 +6699,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6504
6699
|
onChange: (change) => updateColumn(1, change)
|
|
6505
6700
|
}
|
|
6506
6701
|
),
|
|
6507
|
-
/* @__PURE__ */
|
|
6702
|
+
/* @__PURE__ */ React57.createElement(
|
|
6508
6703
|
EditorChildrenIds,
|
|
6509
6704
|
{
|
|
6510
6705
|
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
@@ -6521,7 +6716,7 @@ function ContainerEditor({ style, props }) {
|
|
|
6521
6716
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
6522
6717
|
const document2 = useDocument();
|
|
6523
6718
|
const currentBlockId = useCurrentBlockId();
|
|
6524
|
-
return /* @__PURE__ */
|
|
6719
|
+
return /* @__PURE__ */ React57.createElement(container_default, { style }, /* @__PURE__ */ React57.createElement(
|
|
6525
6720
|
EditorChildrenIds,
|
|
6526
6721
|
{
|
|
6527
6722
|
childrenIds,
|
|
@@ -6722,7 +6917,7 @@ function EmailLayoutEditor(props) {
|
|
|
6722
6917
|
lineHeight: "1.5",
|
|
6723
6918
|
margin: "0"
|
|
6724
6919
|
};
|
|
6725
|
-
const editorChildren = /* @__PURE__ */
|
|
6920
|
+
const editorChildren = /* @__PURE__ */ React57.createElement(
|
|
6726
6921
|
EditorChildrenIds,
|
|
6727
6922
|
{
|
|
6728
6923
|
childrenIds,
|
|
@@ -6750,7 +6945,7 @@ function EmailLayoutEditor(props) {
|
|
|
6750
6945
|
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
6751
6946
|
};
|
|
6752
6947
|
if (props.backdropDisabled) {
|
|
6753
|
-
return /* @__PURE__ */
|
|
6948
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6754
6949
|
"div",
|
|
6755
6950
|
{
|
|
6756
6951
|
onClick: () => {
|
|
@@ -6763,7 +6958,7 @@ function EmailLayoutEditor(props) {
|
|
|
6763
6958
|
minHeight: "100%"
|
|
6764
6959
|
})
|
|
6765
6960
|
},
|
|
6766
|
-
/* @__PURE__ */
|
|
6961
|
+
/* @__PURE__ */ React57.createElement(
|
|
6767
6962
|
"div",
|
|
6768
6963
|
{
|
|
6769
6964
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6771,11 +6966,11 @@ function EmailLayoutEditor(props) {
|
|
|
6771
6966
|
padding: "32px"
|
|
6772
6967
|
})
|
|
6773
6968
|
},
|
|
6774
|
-
/* @__PURE__ */
|
|
6969
|
+
/* @__PURE__ */ React57.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
6775
6970
|
)
|
|
6776
6971
|
);
|
|
6777
6972
|
}
|
|
6778
|
-
return /* @__PURE__ */
|
|
6973
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6779
6974
|
"div",
|
|
6780
6975
|
{
|
|
6781
6976
|
onClick: () => {
|
|
@@ -6788,7 +6983,7 @@ function EmailLayoutEditor(props) {
|
|
|
6788
6983
|
minHeight: "100%"
|
|
6789
6984
|
})
|
|
6790
6985
|
},
|
|
6791
|
-
/* @__PURE__ */
|
|
6986
|
+
/* @__PURE__ */ React57.createElement(
|
|
6792
6987
|
"div",
|
|
6793
6988
|
{
|
|
6794
6989
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6796,7 +6991,7 @@ function EmailLayoutEditor(props) {
|
|
|
6796
6991
|
padding: "32px 0"
|
|
6797
6992
|
})
|
|
6798
6993
|
},
|
|
6799
|
-
/* @__PURE__ */
|
|
6994
|
+
/* @__PURE__ */ React57.createElement(
|
|
6800
6995
|
"table",
|
|
6801
6996
|
{
|
|
6802
6997
|
align: "center",
|
|
@@ -6820,7 +7015,7 @@ function EmailLayoutEditor(props) {
|
|
|
6820
7015
|
cellPadding: "0",
|
|
6821
7016
|
border: 0
|
|
6822
7017
|
},
|
|
6823
|
-
/* @__PURE__ */
|
|
7018
|
+
/* @__PURE__ */ React57.createElement("tbody", null, /* @__PURE__ */ React57.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React57.createElement("td", null, editorChildren)))
|
|
6824
7019
|
)
|
|
6825
7020
|
)
|
|
6826
7021
|
);
|
|
@@ -6980,7 +7175,7 @@ function TuneMenu({ blockId }) {
|
|
|
6980
7175
|
resetDocument(nDocument);
|
|
6981
7176
|
setSelectedBlockId(blockId);
|
|
6982
7177
|
};
|
|
6983
|
-
return /* @__PURE__ */
|
|
7178
|
+
return /* @__PURE__ */ React57.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React57.createElement(Stack, null, /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.move-up", "Move up"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.move-up", "Move up"), onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.move-down", "Move down"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.move-down", "Move down"), onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.copy", "Copy block"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.copy", "Copy block"), onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.delete", "Delete"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.delete", "Delete"), onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(DeleteOutlined, { fontSize: "small" })))));
|
|
6984
7179
|
}
|
|
6985
7180
|
|
|
6986
7181
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
@@ -7002,7 +7197,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7002
7197
|
if (selectedBlockId !== blockId) {
|
|
7003
7198
|
return null;
|
|
7004
7199
|
}
|
|
7005
|
-
return /* @__PURE__ */
|
|
7200
|
+
return /* @__PURE__ */ React57.createElement(TuneMenu, { blockId });
|
|
7006
7201
|
};
|
|
7007
7202
|
const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
|
|
7008
7203
|
const handleDragStart = (e) => {
|
|
@@ -7015,7 +7210,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7015
7210
|
const handleDragEnd = () => {
|
|
7016
7211
|
setDraggingBlock(null);
|
|
7017
7212
|
};
|
|
7018
|
-
return /* @__PURE__ */
|
|
7213
|
+
return /* @__PURE__ */ React57.createElement(
|
|
7019
7214
|
Box,
|
|
7020
7215
|
{
|
|
7021
7216
|
draggable,
|
|
@@ -7160,7 +7355,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7160
7355
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7161
7356
|
});
|
|
7162
7357
|
};
|
|
7163
|
-
return /* @__PURE__ */
|
|
7358
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57.createElement(
|
|
7164
7359
|
"input",
|
|
7165
7360
|
{
|
|
7166
7361
|
type: "text",
|
|
@@ -7177,7 +7372,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7177
7372
|
}
|
|
7178
7373
|
));
|
|
7179
7374
|
}
|
|
7180
|
-
return /* @__PURE__ */
|
|
7375
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57.createElement("span", { style: linkStyle }, /* @__PURE__ */ React57.createElement("span", null, text)));
|
|
7181
7376
|
}
|
|
7182
7377
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
7183
7378
|
const textareaRef = useRef(null);
|
|
@@ -7321,7 +7516,7 @@ function InlineFormattingToolbar({
|
|
|
7321
7516
|
}
|
|
7322
7517
|
}, [linkPrompt]);
|
|
7323
7518
|
const preventBlur = (e) => e.preventDefault();
|
|
7324
|
-
return /* @__PURE__ */
|
|
7519
|
+
return /* @__PURE__ */ React57.createElement(Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React57.createElement(Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, linkPrompt ? /* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React57.createElement(
|
|
7325
7520
|
TextField,
|
|
7326
7521
|
{
|
|
7327
7522
|
inputRef,
|
|
@@ -7343,7 +7538,7 @@ function InlineFormattingToolbar({
|
|
|
7343
7538
|
},
|
|
7344
7539
|
sx: { width: 220 }
|
|
7345
7540
|
}
|
|
7346
|
-
)) : /* @__PURE__ */
|
|
7541
|
+
)) : /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React57.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React57.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React57.createElement(LinkOutlined, { fontSize: "small" })))));
|
|
7347
7542
|
}
|
|
7348
7543
|
|
|
7349
7544
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -7498,7 +7693,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7498
7693
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7499
7694
|
}, [localText, isSelected]);
|
|
7500
7695
|
if (isSelected) {
|
|
7501
|
-
return /* @__PURE__ */
|
|
7696
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
7502
7697
|
"textarea",
|
|
7503
7698
|
{
|
|
7504
7699
|
ref: textareaRef,
|
|
@@ -7516,7 +7711,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7516
7711
|
rows: 1,
|
|
7517
7712
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7518
7713
|
}
|
|
7519
|
-
), /* @__PURE__ */
|
|
7714
|
+
), /* @__PURE__ */ React57.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7520
7715
|
}
|
|
7521
7716
|
const headingProps = isMarkdown ? {
|
|
7522
7717
|
ref: displayRef,
|
|
@@ -7525,11 +7720,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7525
7720
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
7526
7721
|
switch (level) {
|
|
7527
7722
|
case "h1":
|
|
7528
|
-
return /* @__PURE__ */
|
|
7723
|
+
return /* @__PURE__ */ React57.createElement("h1", __spreadValues({}, headingProps));
|
|
7529
7724
|
case "h2":
|
|
7530
|
-
return /* @__PURE__ */
|
|
7725
|
+
return /* @__PURE__ */ React57.createElement("h2", __spreadValues({}, headingProps));
|
|
7531
7726
|
case "h3":
|
|
7532
|
-
return /* @__PURE__ */
|
|
7727
|
+
return /* @__PURE__ */ React57.createElement("h3", __spreadValues({}, headingProps));
|
|
7533
7728
|
}
|
|
7534
7729
|
}
|
|
7535
7730
|
function HtmlEditor({ style, props }) {
|
|
@@ -7594,7 +7789,7 @@ function HtmlEditor({ style, props }) {
|
|
|
7594
7789
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7595
7790
|
});
|
|
7596
7791
|
};
|
|
7597
|
-
return /* @__PURE__ */
|
|
7792
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle }, /* @__PURE__ */ React57.createElement(
|
|
7598
7793
|
"textarea",
|
|
7599
7794
|
{
|
|
7600
7795
|
value: localContents,
|
|
@@ -7614,9 +7809,9 @@ function HtmlEditor({ style, props }) {
|
|
|
7614
7809
|
));
|
|
7615
7810
|
}
|
|
7616
7811
|
if (!contents) {
|
|
7617
|
-
return /* @__PURE__ */
|
|
7812
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle });
|
|
7618
7813
|
}
|
|
7619
|
-
return /* @__PURE__ */
|
|
7814
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
7620
7815
|
}
|
|
7621
7816
|
function getImageBorderRadius2(shape, size) {
|
|
7622
7817
|
switch (shape) {
|
|
@@ -7731,7 +7926,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7731
7926
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
7732
7927
|
padding: (style == null ? void 0 : style.padding) ? `${style.padding.top}px ${style.padding.right}px ${style.padding.bottom}px ${style.padding.left}px` : void 0
|
|
7733
7928
|
};
|
|
7734
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
7929
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React57.createElement(
|
|
7735
7930
|
"img",
|
|
7736
7931
|
{
|
|
7737
7932
|
src: imageUrl,
|
|
@@ -7749,7 +7944,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7749
7944
|
}
|
|
7750
7945
|
}
|
|
7751
7946
|
) : null;
|
|
7752
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
7947
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React57.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React57.createElement(
|
|
7753
7948
|
"input",
|
|
7754
7949
|
{
|
|
7755
7950
|
value: localGreeting,
|
|
@@ -7760,8 +7955,8 @@ function SignatureEditor({ style, props }) {
|
|
|
7760
7955
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
7761
7956
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
7762
7957
|
}
|
|
7763
|
-
)) : greeting ? /* @__PURE__ */
|
|
7764
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
7958
|
+
)) : greeting ? /* @__PURE__ */ React57.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
7959
|
+
const textContent = isSelected ? /* @__PURE__ */ React57.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React57.createElement(
|
|
7765
7960
|
"input",
|
|
7766
7961
|
{
|
|
7767
7962
|
value: localName,
|
|
@@ -7772,7 +7967,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7772
7967
|
placeholder: "Name",
|
|
7773
7968
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
7774
7969
|
}
|
|
7775
|
-
), /* @__PURE__ */
|
|
7970
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7776
7971
|
"input",
|
|
7777
7972
|
{
|
|
7778
7973
|
value: localTitle,
|
|
@@ -7783,7 +7978,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7783
7978
|
placeholder: "Title",
|
|
7784
7979
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7785
7980
|
}
|
|
7786
|
-
), /* @__PURE__ */
|
|
7981
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7787
7982
|
"input",
|
|
7788
7983
|
{
|
|
7789
7984
|
value: localCompany,
|
|
@@ -7794,7 +7989,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7794
7989
|
placeholder: "Company",
|
|
7795
7990
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7796
7991
|
}
|
|
7797
|
-
), /* @__PURE__ */
|
|
7992
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7798
7993
|
"input",
|
|
7799
7994
|
{
|
|
7800
7995
|
value: localAddress,
|
|
@@ -7805,7 +8000,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7805
8000
|
placeholder: "Address",
|
|
7806
8001
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7807
8002
|
}
|
|
7808
|
-
), /* @__PURE__ */
|
|
8003
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7809
8004
|
"input",
|
|
7810
8005
|
{
|
|
7811
8006
|
value: localEmail,
|
|
@@ -7816,7 +8011,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7816
8011
|
placeholder: "Email",
|
|
7817
8012
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
7818
8013
|
}
|
|
7819
|
-
), /* @__PURE__ */
|
|
8014
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7820
8015
|
"input",
|
|
7821
8016
|
{
|
|
7822
8017
|
value: localPhone,
|
|
@@ -7827,7 +8022,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7827
8022
|
placeholder: "Phone",
|
|
7828
8023
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7829
8024
|
}
|
|
7830
|
-
), /* @__PURE__ */
|
|
8025
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7831
8026
|
"input",
|
|
7832
8027
|
{
|
|
7833
8028
|
value: localWebsite,
|
|
@@ -7838,11 +8033,11 @@ function SignatureEditor({ style, props }) {
|
|
|
7838
8033
|
placeholder: "Website",
|
|
7839
8034
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7840
8035
|
}
|
|
7841
|
-
)) : /* @__PURE__ */
|
|
8036
|
+
)) : /* @__PURE__ */ React57.createElement("div", null, name && /* @__PURE__ */ React57.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React57.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React57.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React57.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React57.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React57.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React57.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React57.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React57.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React57.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React57.createElement("p", { style: detailStyle }, "Click to edit signature"));
|
|
7842
8037
|
if (layout === "vertical") {
|
|
7843
|
-
return /* @__PURE__ */
|
|
8038
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React57.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
7844
8039
|
}
|
|
7845
|
-
return /* @__PURE__ */
|
|
8040
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React57.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React57.createElement("tbody", null, /* @__PURE__ */ React57.createElement("tr", null, imageElement && /* @__PURE__ */ React57.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React57.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
7846
8041
|
}
|
|
7847
8042
|
function getFontFamily10(fontFamily) {
|
|
7848
8043
|
switch (fontFamily) {
|
|
@@ -7986,7 +8181,7 @@ function TextEditor({ style, props }) {
|
|
|
7986
8181
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7987
8182
|
}, [localText, isSelected]);
|
|
7988
8183
|
if (isSelected) {
|
|
7989
|
-
return /* @__PURE__ */
|
|
8184
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
7990
8185
|
"textarea",
|
|
7991
8186
|
{
|
|
7992
8187
|
ref: textareaRef,
|
|
@@ -8004,10 +8199,10 @@ function TextEditor({ style, props }) {
|
|
|
8004
8199
|
rows: 1,
|
|
8005
8200
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
8006
8201
|
}
|
|
8007
|
-
), /* @__PURE__ */
|
|
8202
|
+
), /* @__PURE__ */ React57.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
8008
8203
|
}
|
|
8009
8204
|
if (isMarkdown) {
|
|
8010
|
-
return /* @__PURE__ */
|
|
8205
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8011
8206
|
"div",
|
|
8012
8207
|
{
|
|
8013
8208
|
ref: displayRef,
|
|
@@ -8016,34 +8211,34 @@ function TextEditor({ style, props }) {
|
|
|
8016
8211
|
}
|
|
8017
8212
|
);
|
|
8018
8213
|
}
|
|
8019
|
-
return /* @__PURE__ */
|
|
8214
|
+
return /* @__PURE__ */ React57.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
8020
8215
|
}
|
|
8021
8216
|
|
|
8022
8217
|
// src/editor/core.tsx
|
|
8023
8218
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
8024
8219
|
Avatar: {
|
|
8025
8220
|
schema: AvatarPropsSchema,
|
|
8026
|
-
Component: (props) => /* @__PURE__ */
|
|
8221
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(avatar_default, __spreadValues({}, props)))
|
|
8027
8222
|
},
|
|
8028
8223
|
Button: {
|
|
8029
8224
|
schema: ButtonPropsSchema,
|
|
8030
|
-
Component: (props) => /* @__PURE__ */
|
|
8225
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
8031
8226
|
},
|
|
8032
8227
|
Container: {
|
|
8033
8228
|
schema: container_props_schema_default,
|
|
8034
|
-
Component: (props) => /* @__PURE__ */
|
|
8229
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
8035
8230
|
},
|
|
8036
8231
|
ColumnsContainer: {
|
|
8037
8232
|
schema: columns_container_props_schema_default2,
|
|
8038
|
-
Component: (props) => /* @__PURE__ */
|
|
8233
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
8039
8234
|
},
|
|
8040
8235
|
Heading: {
|
|
8041
8236
|
schema: HeadingPropsSchema,
|
|
8042
|
-
Component: (props) => /* @__PURE__ */
|
|
8237
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
8043
8238
|
},
|
|
8044
8239
|
Html: {
|
|
8045
8240
|
schema: HtmlPropsSchema,
|
|
8046
|
-
Component: (props) => /* @__PURE__ */
|
|
8241
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
8047
8242
|
},
|
|
8048
8243
|
Image: {
|
|
8049
8244
|
schema: ImagePropsSchema,
|
|
@@ -8055,28 +8250,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
8055
8250
|
linkHref: null
|
|
8056
8251
|
})
|
|
8057
8252
|
});
|
|
8058
|
-
return /* @__PURE__ */
|
|
8253
|
+
return /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(image_default, __spreadValues({}, props)));
|
|
8059
8254
|
}
|
|
8060
8255
|
},
|
|
8061
8256
|
Text: {
|
|
8062
8257
|
schema: TextPropsSchema,
|
|
8063
|
-
Component: (props) => /* @__PURE__ */
|
|
8258
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(TextEditor, __spreadValues({}, props)))
|
|
8064
8259
|
},
|
|
8065
8260
|
EmailLayout: {
|
|
8066
8261
|
schema: email_layout_props_schema_default,
|
|
8067
|
-
Component: (p) => /* @__PURE__ */
|
|
8262
|
+
Component: (p) => /* @__PURE__ */ React57.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
8068
8263
|
},
|
|
8069
8264
|
Spacer: {
|
|
8070
8265
|
schema: SpacerPropsSchema,
|
|
8071
|
-
Component: (props) => /* @__PURE__ */
|
|
8266
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(spacer_default, __spreadValues({}, props)))
|
|
8072
8267
|
},
|
|
8073
8268
|
Divider: {
|
|
8074
8269
|
schema: DividerPropsSchema,
|
|
8075
|
-
Component: (props) => /* @__PURE__ */
|
|
8270
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(divider_default, __spreadValues({}, props)))
|
|
8076
8271
|
},
|
|
8077
8272
|
Signature: {
|
|
8078
8273
|
schema: SignaturePropsSchema,
|
|
8079
|
-
Component: (props) => /* @__PURE__ */
|
|
8274
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
8080
8275
|
}
|
|
8081
8276
|
});
|
|
8082
8277
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -8092,7 +8287,7 @@ function EditorBlock({ id }) {
|
|
|
8092
8287
|
if (!block) {
|
|
8093
8288
|
throw new Error("Could not find block");
|
|
8094
8289
|
}
|
|
8095
|
-
return /* @__PURE__ */
|
|
8290
|
+
return /* @__PURE__ */ React57.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React57.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
8096
8291
|
}
|
|
8097
8292
|
function ToggleInspectorPanelButton() {
|
|
8098
8293
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -8100,20 +8295,20 @@ function ToggleInspectorPanelButton() {
|
|
|
8100
8295
|
toggleInspectorDrawerOpen();
|
|
8101
8296
|
};
|
|
8102
8297
|
if (inspectorDrawerOpen) {
|
|
8103
|
-
return /* @__PURE__ */
|
|
8298
|
+
return /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React57.createElement(LastPageOutlined, { fontSize: "small" }));
|
|
8104
8299
|
}
|
|
8105
|
-
return /* @__PURE__ */
|
|
8300
|
+
return /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React57.createElement(AppRegistrationOutlined, { fontSize: "small" }));
|
|
8106
8301
|
}
|
|
8107
8302
|
function useIcon() {
|
|
8108
8303
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8109
8304
|
if (samplesDrawerOpen) {
|
|
8110
|
-
return /* @__PURE__ */
|
|
8305
|
+
return /* @__PURE__ */ React57.createElement(FirstPageOutlined, { fontSize: "small" });
|
|
8111
8306
|
}
|
|
8112
|
-
return /* @__PURE__ */
|
|
8307
|
+
return /* @__PURE__ */ React57.createElement(MenuOutlined, { fontSize: "small" });
|
|
8113
8308
|
}
|
|
8114
8309
|
function ToggleSamplesPanelButton() {
|
|
8115
8310
|
const icon = useIcon();
|
|
8116
|
-
return /* @__PURE__ */
|
|
8311
|
+
return /* @__PURE__ */ React57.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
8117
8312
|
}
|
|
8118
8313
|
function formatHtml(html2, spaces = 2) {
|
|
8119
8314
|
try {
|
|
@@ -8175,7 +8370,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8175
8370
|
if (code === null) {
|
|
8176
8371
|
return null;
|
|
8177
8372
|
}
|
|
8178
|
-
return /* @__PURE__ */
|
|
8373
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8179
8374
|
"pre",
|
|
8180
8375
|
{
|
|
8181
8376
|
style: {
|
|
@@ -8201,17 +8396,17 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8201
8396
|
function HtmlPanel() {
|
|
8202
8397
|
const document2 = useDocument();
|
|
8203
8398
|
const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
8204
|
-
return /* @__PURE__ */
|
|
8399
|
+
return /* @__PURE__ */ React57.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
8205
8400
|
}
|
|
8206
8401
|
function JsonPanel() {
|
|
8207
8402
|
const document2 = useDocument();
|
|
8208
8403
|
const code = useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
8209
|
-
return /* @__PURE__ */
|
|
8404
|
+
return /* @__PURE__ */ React57.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
8210
8405
|
}
|
|
8211
8406
|
function TextPanel() {
|
|
8212
8407
|
const document2 = useDocument();
|
|
8213
8408
|
const text = useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
8214
|
-
return /* @__PURE__ */
|
|
8409
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8215
8410
|
"pre",
|
|
8216
8411
|
{
|
|
8217
8412
|
style: {
|
|
@@ -8247,35 +8442,35 @@ function MainTabsGroup() {
|
|
|
8247
8442
|
setSelectedMainTab("editor");
|
|
8248
8443
|
}
|
|
8249
8444
|
};
|
|
8250
|
-
return /* @__PURE__ */
|
|
8445
|
+
return /* @__PURE__ */ React57.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React57.createElement(
|
|
8251
8446
|
Tab,
|
|
8252
8447
|
{
|
|
8253
8448
|
value: "editor",
|
|
8254
|
-
label: /* @__PURE__ */
|
|
8449
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React57.createElement(EditOutlined, { fontSize: "small" }))
|
|
8255
8450
|
}
|
|
8256
|
-
), /* @__PURE__ */
|
|
8451
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8257
8452
|
Tab,
|
|
8258
8453
|
{
|
|
8259
8454
|
value: "preview",
|
|
8260
|
-
label: /* @__PURE__ */
|
|
8455
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React57.createElement(PreviewOutlined, { fontSize: "small" }))
|
|
8261
8456
|
}
|
|
8262
|
-
), /* @__PURE__ */
|
|
8457
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8263
8458
|
Tab,
|
|
8264
8459
|
{
|
|
8265
8460
|
value: "html",
|
|
8266
|
-
label: /* @__PURE__ */
|
|
8461
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React57.createElement(CodeOutlined, { fontSize: "small" }))
|
|
8267
8462
|
}
|
|
8268
|
-
), /* @__PURE__ */
|
|
8463
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8269
8464
|
Tab,
|
|
8270
8465
|
{
|
|
8271
8466
|
value: "text",
|
|
8272
|
-
label: /* @__PURE__ */
|
|
8467
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React57.createElement(SubjectOutlined, { fontSize: "small" }))
|
|
8273
8468
|
}
|
|
8274
|
-
), /* @__PURE__ */
|
|
8469
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8275
8470
|
Tab,
|
|
8276
8471
|
{
|
|
8277
8472
|
value: "json",
|
|
8278
|
-
label: /* @__PURE__ */
|
|
8473
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React57.createElement(DataObjectOutlined, { fontSize: "small" }))
|
|
8279
8474
|
}
|
|
8280
8475
|
));
|
|
8281
8476
|
}
|
|
@@ -8294,7 +8489,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8294
8489
|
const [nameError, setNameError] = useState(null);
|
|
8295
8490
|
const hasOpenRow = Boolean(currentTemplateId);
|
|
8296
8491
|
const isSample = currentTemplateKind === "sample";
|
|
8297
|
-
const primaryLabel = hasOpenRow ? "Save" : "Save as new\u2026";
|
|
8492
|
+
const primaryLabel = hasOpenRow ? t("savebar.save", "Save") : t("savebar.save-as-new", "Save as new\u2026");
|
|
8298
8493
|
const handlePrimary = () => __async(null, null, function* () {
|
|
8299
8494
|
try {
|
|
8300
8495
|
if (!hasOpenRow) {
|
|
@@ -8303,11 +8498,11 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8303
8498
|
return;
|
|
8304
8499
|
}
|
|
8305
8500
|
saveTemplate();
|
|
8306
|
-
showMessage(isSample ? "Sample saved" : "Template saved");
|
|
8501
|
+
showMessage(isSample ? t("savebar.sample-saved", "Sample saved") : t("savebar.template-saved", "Template saved"));
|
|
8307
8502
|
if (loadTemplates) yield loadTemplates();
|
|
8308
8503
|
} catch (e) {
|
|
8309
8504
|
console.error("Error saving:", e);
|
|
8310
|
-
showMessage("Error saving");
|
|
8505
|
+
showMessage(t("savebar.error-saving", "Error saving"));
|
|
8311
8506
|
}
|
|
8312
8507
|
});
|
|
8313
8508
|
const handleSaveAs = (name) => __async(null, null, function* () {
|
|
@@ -8319,16 +8514,18 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8319
8514
|
setCurrentTemplate(id, slug, "template");
|
|
8320
8515
|
ctxLoadTemplate(starterContent, id, slug, "template");
|
|
8321
8516
|
if (loadTemplates) yield loadTemplates();
|
|
8322
|
-
showMessage(
|
|
8517
|
+
showMessage(
|
|
8518
|
+
dialogMode === "new-blank" ? t("savebar.new-template-created", "New template created") : t("savebar.template-saved", "Template saved")
|
|
8519
|
+
);
|
|
8323
8520
|
window.location.hash = `#template/${id}`;
|
|
8324
8521
|
return true;
|
|
8325
8522
|
} catch (e) {
|
|
8326
8523
|
console.error("Error in saveAs:", e);
|
|
8327
|
-
showMessage("Error saving");
|
|
8524
|
+
showMessage(t("savebar.error-saving", "Error saving"));
|
|
8328
8525
|
return false;
|
|
8329
8526
|
}
|
|
8330
8527
|
});
|
|
8331
|
-
return /* @__PURE__ */
|
|
8528
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
8332
8529
|
Box,
|
|
8333
8530
|
{
|
|
8334
8531
|
sx: {
|
|
@@ -8341,7 +8538,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8341
8538
|
pb: 3
|
|
8342
8539
|
}
|
|
8343
8540
|
},
|
|
8344
|
-
/* @__PURE__ */
|
|
8541
|
+
/* @__PURE__ */ React57.createElement(
|
|
8345
8542
|
Box,
|
|
8346
8543
|
{
|
|
8347
8544
|
sx: {
|
|
@@ -8356,7 +8553,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8356
8553
|
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
8357
8554
|
}
|
|
8358
8555
|
},
|
|
8359
|
-
hasOpenRow && currentTemplateName && /* @__PURE__ */
|
|
8556
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React57.createElement(
|
|
8360
8557
|
Box,
|
|
8361
8558
|
{
|
|
8362
8559
|
sx: {
|
|
@@ -8371,50 +8568,50 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8371
8568
|
},
|
|
8372
8569
|
title: currentTemplateName
|
|
8373
8570
|
},
|
|
8374
|
-
isSample ? "Sample \xB7
|
|
8375
|
-
/* @__PURE__ */
|
|
8571
|
+
isSample ? `${t("savebar.sample-prefix", "Sample")} \xB7 ` : "",
|
|
8572
|
+
/* @__PURE__ */ React57.createElement(Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8376
8573
|
),
|
|
8377
|
-
/* @__PURE__ */
|
|
8574
|
+
/* @__PURE__ */ React57.createElement(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__ */ React57.createElement(
|
|
8378
8575
|
Button$1,
|
|
8379
8576
|
{
|
|
8380
8577
|
variant: "contained",
|
|
8381
8578
|
size: "large",
|
|
8382
|
-
startIcon: /* @__PURE__ */
|
|
8579
|
+
startIcon: /* @__PURE__ */ React57.createElement(SaveOutlined, null),
|
|
8383
8580
|
onClick: handlePrimary,
|
|
8384
8581
|
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8385
8582
|
},
|
|
8386
8583
|
primaryLabel
|
|
8387
8584
|
)),
|
|
8388
|
-
hasOpenRow && saveAs && /* @__PURE__ */
|
|
8585
|
+
hasOpenRow && saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: t("savebar.save-as-new-template", "Save as a new template") }, /* @__PURE__ */ React57.createElement(
|
|
8389
8586
|
Button$1,
|
|
8390
8587
|
{
|
|
8391
8588
|
variant: "outlined",
|
|
8392
8589
|
size: "large",
|
|
8393
|
-
startIcon: /* @__PURE__ */
|
|
8590
|
+
startIcon: /* @__PURE__ */ React57.createElement(SaveAsOutlined, null),
|
|
8394
8591
|
onClick: () => {
|
|
8395
8592
|
setNameError(null);
|
|
8396
8593
|
setDialogMode("save-as");
|
|
8397
8594
|
},
|
|
8398
8595
|
sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14 }
|
|
8399
8596
|
},
|
|
8400
|
-
"Save as\u2026"
|
|
8597
|
+
t("savebar.save-as", "Save as\u2026")
|
|
8401
8598
|
)),
|
|
8402
|
-
saveAs && /* @__PURE__ */
|
|
8599
|
+
saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: t("savebar.start-fresh", "Start a fresh template") }, /* @__PURE__ */ React57.createElement(
|
|
8403
8600
|
Button$1,
|
|
8404
8601
|
{
|
|
8405
8602
|
variant: "text",
|
|
8406
8603
|
size: "large",
|
|
8407
|
-
startIcon: /* @__PURE__ */
|
|
8604
|
+
startIcon: /* @__PURE__ */ React57.createElement(AddOutlined, null),
|
|
8408
8605
|
onClick: () => {
|
|
8409
8606
|
setNameError(null);
|
|
8410
8607
|
setDialogMode("new-blank");
|
|
8411
8608
|
},
|
|
8412
8609
|
sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14, color: "text.secondary" }
|
|
8413
8610
|
},
|
|
8414
|
-
"New"
|
|
8611
|
+
t("savebar.new", "New")
|
|
8415
8612
|
))
|
|
8416
8613
|
)
|
|
8417
|
-
), /* @__PURE__ */
|
|
8614
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8418
8615
|
SaveTemplateDialog,
|
|
8419
8616
|
{
|
|
8420
8617
|
open: dialogMode !== null,
|
|
@@ -8452,7 +8649,7 @@ function SubjectInput() {
|
|
|
8452
8649
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
8453
8650
|
});
|
|
8454
8651
|
};
|
|
8455
|
-
return /* @__PURE__ */
|
|
8652
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8456
8653
|
Box,
|
|
8457
8654
|
{
|
|
8458
8655
|
sx: {
|
|
@@ -8469,8 +8666,8 @@ function SubjectInput() {
|
|
|
8469
8666
|
gap: 1.5
|
|
8470
8667
|
}
|
|
8471
8668
|
},
|
|
8472
|
-
/* @__PURE__ */
|
|
8473
|
-
/* @__PURE__ */
|
|
8669
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8670
|
+
/* @__PURE__ */ React57.createElement(
|
|
8474
8671
|
InputBase,
|
|
8475
8672
|
{
|
|
8476
8673
|
fullWidth: true,
|
|
@@ -8496,7 +8693,7 @@ function SubjectPreview() {
|
|
|
8496
8693
|
if (!subject) return null;
|
|
8497
8694
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
8498
8695
|
const rendered = substituteSampleValues(subject, samples);
|
|
8499
|
-
return /* @__PURE__ */
|
|
8696
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8500
8697
|
Box,
|
|
8501
8698
|
{
|
|
8502
8699
|
sx: {
|
|
@@ -8513,8 +8710,8 @@ function SubjectPreview() {
|
|
|
8513
8710
|
gap: 1.5
|
|
8514
8711
|
}
|
|
8515
8712
|
},
|
|
8516
|
-
/* @__PURE__ */
|
|
8517
|
-
/* @__PURE__ */
|
|
8713
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8714
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { fontSize: 14 } }, rendered)
|
|
8518
8715
|
);
|
|
8519
8716
|
}
|
|
8520
8717
|
function generateId3() {
|
|
@@ -8587,7 +8784,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8587
8784
|
window.addEventListener("paste", handlePaste);
|
|
8588
8785
|
return () => window.removeEventListener("paste", handlePaste);
|
|
8589
8786
|
}, [active, uploadImage]);
|
|
8590
|
-
if (!active) return /* @__PURE__ */
|
|
8787
|
+
if (!active) return /* @__PURE__ */ React57.createElement(React57.Fragment, null, children);
|
|
8591
8788
|
const onDragEnter = (e) => {
|
|
8592
8789
|
var _a, _b;
|
|
8593
8790
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -8620,7 +8817,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8620
8817
|
setUploading(false);
|
|
8621
8818
|
}
|
|
8622
8819
|
});
|
|
8623
|
-
return /* @__PURE__ */
|
|
8820
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8624
8821
|
Box,
|
|
8625
8822
|
{
|
|
8626
8823
|
ref: wrapperRef,
|
|
@@ -8631,7 +8828,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8631
8828
|
sx: { position: "relative" }
|
|
8632
8829
|
},
|
|
8633
8830
|
children,
|
|
8634
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
8831
|
+
(dragging || uploading) && /* @__PURE__ */ React57.createElement(
|
|
8635
8832
|
Box,
|
|
8636
8833
|
{
|
|
8637
8834
|
sx: {
|
|
@@ -8650,7 +8847,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8650
8847
|
zIndex: 10
|
|
8651
8848
|
}
|
|
8652
8849
|
},
|
|
8653
|
-
/* @__PURE__ */
|
|
8850
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React57.createElement(CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
|
|
8654
8851
|
)
|
|
8655
8852
|
);
|
|
8656
8853
|
}
|
|
@@ -8690,7 +8887,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8690
8887
|
var _a;
|
|
8691
8888
|
switch (selectedMainTab) {
|
|
8692
8889
|
case "editor":
|
|
8693
|
-
return /* @__PURE__ */
|
|
8890
|
+
return /* @__PURE__ */ React57.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React57.createElement(EditorBlock, { id: "root" }));
|
|
8694
8891
|
case "preview": {
|
|
8695
8892
|
const rootBlock = document2.root;
|
|
8696
8893
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -8698,18 +8895,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8698
8895
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
8699
8896
|
);
|
|
8700
8897
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
8701
|
-
return /* @__PURE__ */
|
|
8898
|
+
return /* @__PURE__ */ React57.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React57.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
8702
8899
|
}
|
|
8703
8900
|
case "html":
|
|
8704
|
-
return /* @__PURE__ */
|
|
8901
|
+
return /* @__PURE__ */ React57.createElement(HtmlPanel, null);
|
|
8705
8902
|
case "text":
|
|
8706
|
-
return /* @__PURE__ */
|
|
8903
|
+
return /* @__PURE__ */ React57.createElement(TextPanel, null);
|
|
8707
8904
|
case "json":
|
|
8708
|
-
return /* @__PURE__ */
|
|
8905
|
+
return /* @__PURE__ */ React57.createElement(JsonPanel, null);
|
|
8709
8906
|
}
|
|
8710
8907
|
};
|
|
8711
8908
|
const showSaveButtons = persistenceEnabled;
|
|
8712
|
-
return /* @__PURE__ */
|
|
8909
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
8713
8910
|
Stack,
|
|
8714
8911
|
{
|
|
8715
8912
|
sx: {
|
|
@@ -8726,10 +8923,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8726
8923
|
justifyContent: "space-between",
|
|
8727
8924
|
alignItems: "center"
|
|
8728
8925
|
},
|
|
8729
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
8730
|
-
/* @__PURE__ */
|
|
8731
|
-
/* @__PURE__ */
|
|
8732
|
-
), selectedMainTab === "editor" && /* @__PURE__ */
|
|
8926
|
+
samplesDrawerEnabled && /* @__PURE__ */ React57.createElement(ToggleSamplesPanelButton, null),
|
|
8927
|
+
/* @__PURE__ */ React57.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57.createElement(PhoneIphoneOutlined, { fontSize: "small" })))))),
|
|
8928
|
+
/* @__PURE__ */ React57.createElement(ToggleInspectorPanelButton, null)
|
|
8929
|
+
), selectedMainTab === "editor" && /* @__PURE__ */ React57.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React57.createElement(SubjectPreview, null), /* @__PURE__ */ React57.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React57.createElement(
|
|
8733
8930
|
Box,
|
|
8734
8931
|
{
|
|
8735
8932
|
sx: {
|
|
@@ -8745,8 +8942,8 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8745
8942
|
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
8746
8943
|
}
|
|
8747
8944
|
},
|
|
8748
|
-
/* @__PURE__ */
|
|
8749
|
-
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */
|
|
8945
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
|
|
8946
|
+
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React57.createElement(SaveBar, { loadTemplates, saveAs })
|
|
8750
8947
|
)));
|
|
8751
8948
|
}
|
|
8752
8949
|
|
|
@@ -8828,15 +9025,16 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
8828
9025
|
return getDocument();
|
|
8829
9026
|
}
|
|
8830
9027
|
}));
|
|
8831
|
-
return /* @__PURE__ */
|
|
9028
|
+
return /* @__PURE__ */ React57.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React57.createElement(
|
|
8832
9029
|
InspectorDrawer,
|
|
8833
9030
|
{
|
|
8834
9031
|
enterDuration: drawerEnterDuration,
|
|
8835
9032
|
exitDuration: drawerExitDuration,
|
|
8836
9033
|
deleteTemplate,
|
|
8837
|
-
copyTemplate
|
|
9034
|
+
copyTemplate,
|
|
9035
|
+
renameTemplate
|
|
8838
9036
|
}
|
|
8839
|
-
), /* @__PURE__ */
|
|
9037
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8840
9038
|
SamplesDrawer,
|
|
8841
9039
|
{
|
|
8842
9040
|
enterDuration: drawerEnterDuration,
|
|
@@ -8852,7 +9050,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
8852
9050
|
setTemplateKind,
|
|
8853
9051
|
saveAs
|
|
8854
9052
|
}
|
|
8855
|
-
), /* @__PURE__ */
|
|
9053
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8856
9054
|
Stack,
|
|
8857
9055
|
{
|
|
8858
9056
|
sx: {
|
|
@@ -8861,7 +9059,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
8861
9059
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
8862
9060
|
}
|
|
8863
9061
|
},
|
|
8864
|
-
/* @__PURE__ */
|
|
9062
|
+
/* @__PURE__ */ React57.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
8865
9063
|
));
|
|
8866
9064
|
});
|
|
8867
9065
|
var EmailEditor = forwardRef((props, ref) => {
|
|
@@ -8887,8 +9085,10 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
8887
9085
|
uploadImage,
|
|
8888
9086
|
loadImages,
|
|
8889
9087
|
deleteImage,
|
|
8890
|
-
theme
|
|
9088
|
+
theme,
|
|
9089
|
+
locale
|
|
8891
9090
|
} = props;
|
|
9091
|
+
activateLocale(locale);
|
|
8892
9092
|
const resolvedTemplate = useMemo(
|
|
8893
9093
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
8894
9094
|
[initialTemplateProp]
|
|
@@ -8905,7 +9105,7 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
8905
9105
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
8906
9106
|
[uploadImage, loadImages, deleteImage]
|
|
8907
9107
|
);
|
|
8908
|
-
return /* @__PURE__ */
|
|
9108
|
+
return /* @__PURE__ */ React57.createElement(I18nProvider, { i18n }, /* @__PURE__ */ React57.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React57.createElement(CssBaseline, null), /* @__PURE__ */ React57.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React57.createElement(SnackbarProvider, null, /* @__PURE__ */ React57.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React57.createElement(
|
|
8909
9109
|
EmailEditorProvider,
|
|
8910
9110
|
{
|
|
8911
9111
|
initialTemplate: resolvedTemplate,
|
|
@@ -8914,7 +9114,7 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
8914
9114
|
onSave,
|
|
8915
9115
|
onChange
|
|
8916
9116
|
},
|
|
8917
|
-
/* @__PURE__ */
|
|
9117
|
+
/* @__PURE__ */ React57.createElement(
|
|
8918
9118
|
EmailEditorInternal,
|
|
8919
9119
|
{
|
|
8920
9120
|
ref,
|
|
@@ -8933,11 +9133,11 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
8933
9133
|
onChange
|
|
8934
9134
|
}
|
|
8935
9135
|
)
|
|
8936
|
-
)))));
|
|
9136
|
+
))))));
|
|
8937
9137
|
});
|
|
8938
9138
|
EmailEditor.displayName = "EmailEditor";
|
|
8939
9139
|
EmailEditorInternal.displayName = "EmailEditorInternal";
|
|
8940
9140
|
|
|
8941
|
-
export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, editorHandlebars, evaluateHandlebars, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
|
|
9141
|
+
export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, SUPPORTED_LOCALES, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, editorHandlebars, evaluateHandlebars, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
|
|
8942
9142
|
//# sourceMappingURL=index.js.map
|
|
8943
9143
|
//# sourceMappingURL=index.js.map
|