@kontakto/email-template-editor 2.3.1 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +871 -727
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +678 -534
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
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
8
|
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';
|
|
9
9
|
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';
|
|
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, 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
11
|
import { HexColorPicker, HexColorInput } from 'react-colorful';
|
|
12
12
|
import hljs from 'highlight.js';
|
|
13
13
|
import jsonHighlighter from 'highlight.js/lib/languages/json';
|
|
@@ -181,7 +181,7 @@ function renderInlineMarkdownString(str) {
|
|
|
181
181
|
function EmailMarkdown(_a) {
|
|
182
182
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
183
183
|
const data = useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
184
|
-
return /* @__PURE__ */
|
|
184
|
+
return /* @__PURE__ */ React57.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
185
185
|
}
|
|
186
186
|
var FONT_FAMILY_SCHEMA = z.enum([
|
|
187
187
|
"MODERN_SANS",
|
|
@@ -261,9 +261,9 @@ function Text({ style, props }) {
|
|
|
261
261
|
};
|
|
262
262
|
const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
|
|
263
263
|
if (props == null ? void 0 : props.markdown) {
|
|
264
|
-
return /* @__PURE__ */
|
|
264
|
+
return /* @__PURE__ */ React57.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
265
265
|
}
|
|
266
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle }, text);
|
|
267
267
|
}
|
|
268
268
|
var PADDING_SCHEMA2 = z.object({
|
|
269
269
|
top: z.number(),
|
|
@@ -312,7 +312,7 @@ function Avatar({ style, props }) {
|
|
|
312
312
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
313
313
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
314
314
|
};
|
|
315
|
-
return /* @__PURE__ */
|
|
315
|
+
return /* @__PURE__ */ React57.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React57.createElement(
|
|
316
316
|
"img",
|
|
317
317
|
{
|
|
318
318
|
alt,
|
|
@@ -464,14 +464,14 @@ function Button({ style, props }) {
|
|
|
464
464
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
465
465
|
textDecoration: "none"
|
|
466
466
|
};
|
|
467
|
-
return /* @__PURE__ */
|
|
467
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React57.createElement(
|
|
468
468
|
"span",
|
|
469
469
|
{
|
|
470
470
|
dangerouslySetInnerHTML: {
|
|
471
471
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
472
472
|
}
|
|
473
473
|
}
|
|
474
|
-
), /* @__PURE__ */
|
|
474
|
+
), /* @__PURE__ */ React57.createElement("span", null, text), /* @__PURE__ */ React57.createElement(
|
|
475
475
|
"span",
|
|
476
476
|
{
|
|
477
477
|
dangerouslySetInnerHTML: {
|
|
@@ -520,7 +520,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
520
520
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
521
521
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
522
522
|
};
|
|
523
|
-
return /* @__PURE__ */
|
|
523
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle }, /* @__PURE__ */ React57.createElement(
|
|
524
524
|
"table",
|
|
525
525
|
{
|
|
526
526
|
align: "center",
|
|
@@ -529,7 +529,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
529
529
|
border: 0,
|
|
530
530
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
531
531
|
},
|
|
532
|
-
/* @__PURE__ */
|
|
532
|
+
/* @__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
533
|
));
|
|
534
534
|
}
|
|
535
535
|
function TableCell({ index, props, columns }) {
|
|
@@ -547,7 +547,7 @@ function TableCell({ index, props, columns }) {
|
|
|
547
547
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
548
548
|
};
|
|
549
549
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
550
|
-
return /* @__PURE__ */
|
|
550
|
+
return /* @__PURE__ */ React57.createElement("td", { style }, children);
|
|
551
551
|
}
|
|
552
552
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
553
553
|
if (index === 0) {
|
|
@@ -609,9 +609,9 @@ function Container({ style, children }) {
|
|
|
609
609
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
610
610
|
};
|
|
611
611
|
if (!children) {
|
|
612
|
-
return /* @__PURE__ */
|
|
612
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle });
|
|
613
613
|
}
|
|
614
|
-
return /* @__PURE__ */
|
|
614
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wStyle }, children);
|
|
615
615
|
}
|
|
616
616
|
var container_default = Container;
|
|
617
617
|
var COLOR_SCHEMA5 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -645,7 +645,7 @@ function Divider({ style, props }) {
|
|
|
645
645
|
};
|
|
646
646
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
647
647
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
648
|
-
return /* @__PURE__ */
|
|
648
|
+
return /* @__PURE__ */ React57.createElement("div", { style: st }, /* @__PURE__ */ React57.createElement(
|
|
649
649
|
"hr",
|
|
650
650
|
{
|
|
651
651
|
style: {
|
|
@@ -743,11 +743,11 @@ function Heading({ props, style }) {
|
|
|
743
743
|
const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
|
|
744
744
|
switch (level) {
|
|
745
745
|
case "h1":
|
|
746
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ React57.createElement("h1", __spreadValues({}, renderProps));
|
|
747
747
|
case "h2":
|
|
748
|
-
return /* @__PURE__ */
|
|
748
|
+
return /* @__PURE__ */ React57.createElement("h2", __spreadValues({}, renderProps));
|
|
749
749
|
case "h3":
|
|
750
|
-
return /* @__PURE__ */
|
|
750
|
+
return /* @__PURE__ */ React57.createElement("h3", __spreadValues({}, renderProps));
|
|
751
751
|
}
|
|
752
752
|
}
|
|
753
753
|
function getFontSize(level) {
|
|
@@ -829,9 +829,9 @@ function Html({ style, props }) {
|
|
|
829
829
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
830
830
|
};
|
|
831
831
|
if (!children) {
|
|
832
|
-
return /* @__PURE__ */
|
|
832
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle });
|
|
833
833
|
}
|
|
834
|
-
return /* @__PURE__ */
|
|
834
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
835
835
|
}
|
|
836
836
|
var html_default = Html;
|
|
837
837
|
var PADDING_SCHEMA9 = z.object({
|
|
@@ -867,7 +867,7 @@ function Image({ style, props }) {
|
|
|
867
867
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
868
868
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
869
869
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
870
|
-
const imageElement = /* @__PURE__ */
|
|
870
|
+
const imageElement = /* @__PURE__ */ React57.createElement(
|
|
871
871
|
"img",
|
|
872
872
|
{
|
|
873
873
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -887,9 +887,9 @@ function Image({ style, props }) {
|
|
|
887
887
|
}
|
|
888
888
|
);
|
|
889
889
|
if (!linkHref) {
|
|
890
|
-
return /* @__PURE__ */
|
|
890
|
+
return /* @__PURE__ */ React57.createElement("div", { style: sectionStyle }, imageElement);
|
|
891
891
|
}
|
|
892
|
-
return /* @__PURE__ */
|
|
892
|
+
return /* @__PURE__ */ React57.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React57.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
893
893
|
}
|
|
894
894
|
var image_default = Image;
|
|
895
895
|
var FONT_FAMILY_SCHEMA5 = z.enum([
|
|
@@ -1035,7 +1035,7 @@ function Signature({ style, props }) {
|
|
|
1035
1035
|
color: linkColor,
|
|
1036
1036
|
textDecoration: "none"
|
|
1037
1037
|
};
|
|
1038
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
1038
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React57.createElement(
|
|
1039
1039
|
"img",
|
|
1040
1040
|
{
|
|
1041
1041
|
src: imageUrl,
|
|
@@ -1054,18 +1054,18 @@ function Signature({ style, props }) {
|
|
|
1054
1054
|
}
|
|
1055
1055
|
) : null;
|
|
1056
1056
|
const contactParts = [];
|
|
1057
|
-
if (email) contactParts.push(/* @__PURE__ */
|
|
1058
|
-
if (phone) contactParts.push(/* @__PURE__ */
|
|
1057
|
+
if (email) contactParts.push(/* @__PURE__ */ React57.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1058
|
+
if (phone) contactParts.push(/* @__PURE__ */ React57.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1059
1059
|
if (website) {
|
|
1060
1060
|
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1061
|
-
contactParts.push(/* @__PURE__ */
|
|
1061
|
+
contactParts.push(/* @__PURE__ */ React57.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1062
1062
|
}
|
|
1063
|
-
const textContent = /* @__PURE__ */
|
|
1064
|
-
const greetingElement = greeting ? /* @__PURE__ */
|
|
1063
|
+
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))));
|
|
1064
|
+
const greetingElement = greeting ? /* @__PURE__ */ React57.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1065
1065
|
if (layout === "vertical") {
|
|
1066
|
-
return /* @__PURE__ */
|
|
1066
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React57.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1067
1067
|
}
|
|
1068
|
-
return /* @__PURE__ */
|
|
1068
|
+
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
1069
|
}
|
|
1070
1070
|
var signature_default = Signature;
|
|
1071
1071
|
var SpacerPropsSchema = z.object({
|
|
@@ -1082,13 +1082,13 @@ function Spacer({ props }) {
|
|
|
1082
1082
|
const style = {
|
|
1083
1083
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
1084
1084
|
};
|
|
1085
|
-
return /* @__PURE__ */
|
|
1085
|
+
return /* @__PURE__ */ React57.createElement("div", { style });
|
|
1086
1086
|
}
|
|
1087
1087
|
var spacer_default = Spacer;
|
|
1088
1088
|
function buildBlockComponent(blocks) {
|
|
1089
1089
|
return function BlockComponent({ type, data }) {
|
|
1090
1090
|
const Component = blocks[type].Component;
|
|
1091
|
-
return /* @__PURE__ */
|
|
1091
|
+
return /* @__PURE__ */ React57.createElement(Component, __spreadValues({}, data));
|
|
1092
1092
|
};
|
|
1093
1093
|
}
|
|
1094
1094
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -1157,9 +1157,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
1157
1157
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
1158
1158
|
let cols = void 0;
|
|
1159
1159
|
if (columns) {
|
|
1160
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1160
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React57.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1161
1161
|
}
|
|
1162
|
-
return /* @__PURE__ */
|
|
1162
|
+
return /* @__PURE__ */ React57.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
1163
1163
|
}
|
|
1164
1164
|
var ContainerPropsSchema2 = z.object({
|
|
1165
1165
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -1170,7 +1170,7 @@ var ContainerPropsSchema2 = z.object({
|
|
|
1170
1170
|
function ContainerReader({ style, props }) {
|
|
1171
1171
|
var _a;
|
|
1172
1172
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
1173
|
-
return /* @__PURE__ */
|
|
1173
|
+
return /* @__PURE__ */ React57.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React57.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1174
1174
|
}
|
|
1175
1175
|
var COLOR_SCHEMA9 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1176
1176
|
var FONT_FAMILY_SCHEMA6 = z.enum([
|
|
@@ -1243,9 +1243,9 @@ function EmailLayoutReader(props) {
|
|
|
1243
1243
|
margin: "0"
|
|
1244
1244
|
};
|
|
1245
1245
|
if (props.backdropDisabled) {
|
|
1246
|
-
return /* @__PURE__ */
|
|
1246
|
+
return /* @__PURE__ */ React57.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React57.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1247
1247
|
}
|
|
1248
|
-
return /* @__PURE__ */
|
|
1248
|
+
return /* @__PURE__ */ React57.createElement(
|
|
1249
1249
|
"div",
|
|
1250
1250
|
{
|
|
1251
1251
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
@@ -1255,7 +1255,7 @@ function EmailLayoutReader(props) {
|
|
|
1255
1255
|
width: "100%"
|
|
1256
1256
|
})
|
|
1257
1257
|
},
|
|
1258
|
-
/* @__PURE__ */
|
|
1258
|
+
/* @__PURE__ */ React57.createElement(
|
|
1259
1259
|
"table",
|
|
1260
1260
|
{
|
|
1261
1261
|
align: "center",
|
|
@@ -1273,7 +1273,7 @@ function EmailLayoutReader(props) {
|
|
|
1273
1273
|
cellPadding: "0",
|
|
1274
1274
|
border: 0
|
|
1275
1275
|
},
|
|
1276
|
-
/* @__PURE__ */
|
|
1276
|
+
/* @__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
1277
|
)
|
|
1278
1278
|
);
|
|
1279
1279
|
}
|
|
@@ -1285,7 +1285,7 @@ function useReaderDocument() {
|
|
|
1285
1285
|
}
|
|
1286
1286
|
function ReaderBlock({ id }) {
|
|
1287
1287
|
const document2 = useReaderDocument();
|
|
1288
|
-
return document2[id] ? /* @__PURE__ */
|
|
1288
|
+
return document2[id] ? /* @__PURE__ */ React57.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1289
1289
|
}
|
|
1290
1290
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1291
1291
|
ColumnsContainer: {
|
|
@@ -1342,13 +1342,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1342
1342
|
var ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
|
|
1343
1343
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1344
1344
|
function Reader({ document: document2, rootBlockId }) {
|
|
1345
|
-
return /* @__PURE__ */
|
|
1345
|
+
return /* @__PURE__ */ React57.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React57.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1346
1346
|
}
|
|
1347
1347
|
|
|
1348
1348
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1349
1349
|
function renderToStaticMarkup(document2, { rootBlockId, variables }) {
|
|
1350
1350
|
const html2 = "<!DOCTYPE html>" + renderToStaticMarkup$1(
|
|
1351
|
-
/* @__PURE__ */
|
|
1351
|
+
/* @__PURE__ */ React57.createElement("html", null, /* @__PURE__ */ React57.createElement("body", null, /* @__PURE__ */ React57.createElement(Reader, { document: document2, rootBlockId })))
|
|
1352
1352
|
);
|
|
1353
1353
|
if (!variables) return html2;
|
|
1354
1354
|
return evaluateHandlebars(html2, variables);
|
|
@@ -2154,6 +2154,7 @@ var EmailEditorProvider = ({
|
|
|
2154
2154
|
const [currentTemplateId, setCurrentTemplateId] = useState(initialTemplateId);
|
|
2155
2155
|
const [currentTemplateName, setCurrentTemplateName] = useState(initialTemplateName);
|
|
2156
2156
|
const [currentTemplateKind, setCurrentTemplateKind] = useState(null);
|
|
2157
|
+
const [currentTemplateTags, setCurrentTemplateTagsState] = useState([]);
|
|
2157
2158
|
const saveListenersRef = useRef([]);
|
|
2158
2159
|
const onSaveRef = useRef(onSave);
|
|
2159
2160
|
onSaveRef.current = onSave;
|
|
@@ -2165,23 +2166,26 @@ var EmailEditorProvider = ({
|
|
|
2165
2166
|
}
|
|
2166
2167
|
return currentDoc;
|
|
2167
2168
|
}, []);
|
|
2168
|
-
const loadTemplate = useCallback(
|
|
2169
|
-
|
|
2169
|
+
const loadTemplate = useCallback(
|
|
2170
|
+
(_newTemplate, templateId, templateName, kind, tags) => {
|
|
2171
|
+
if (templateId !== void 0) setCurrentTemplateId(templateId);
|
|
2172
|
+
if (templateName !== void 0) setCurrentTemplateName(templateName);
|
|
2173
|
+
if (kind !== void 0) setCurrentTemplateKind(kind);
|
|
2174
|
+
if (tags !== void 0) setCurrentTemplateTagsState(tags != null ? tags : []);
|
|
2175
|
+
},
|
|
2176
|
+
[]
|
|
2177
|
+
);
|
|
2178
|
+
const setCurrentTemplate = useCallback(
|
|
2179
|
+
(templateId, templateName, kind, tags) => {
|
|
2170
2180
|
setCurrentTemplateId(templateId);
|
|
2171
|
-
}
|
|
2172
|
-
if (templateName !== void 0) {
|
|
2173
2181
|
setCurrentTemplateName(templateName);
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
const
|
|
2180
|
-
|
|
2181
|
-
setCurrentTemplateName(templateName);
|
|
2182
|
-
if (kind !== void 0) {
|
|
2183
|
-
setCurrentTemplateKind(kind);
|
|
2184
|
-
}
|
|
2182
|
+
if (kind !== void 0) setCurrentTemplateKind(kind);
|
|
2183
|
+
if (tags !== void 0) setCurrentTemplateTagsState(tags != null ? tags : []);
|
|
2184
|
+
},
|
|
2185
|
+
[]
|
|
2186
|
+
);
|
|
2187
|
+
const setCurrentTemplateTags = useCallback((tags) => {
|
|
2188
|
+
setCurrentTemplateTagsState(tags);
|
|
2185
2189
|
}, []);
|
|
2186
2190
|
const registerSaveListener = useCallback((callback) => {
|
|
2187
2191
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
@@ -2189,16 +2193,31 @@ var EmailEditorProvider = ({
|
|
|
2189
2193
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
2190
2194
|
};
|
|
2191
2195
|
}, []);
|
|
2192
|
-
const value = useMemo(
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2196
|
+
const value = useMemo(
|
|
2197
|
+
() => ({
|
|
2198
|
+
currentTemplateId,
|
|
2199
|
+
currentTemplateName,
|
|
2200
|
+
currentTemplateKind,
|
|
2201
|
+
currentTemplateTags,
|
|
2202
|
+
saveTemplate,
|
|
2203
|
+
loadTemplate,
|
|
2204
|
+
registerSaveListener,
|
|
2205
|
+
setCurrentTemplate,
|
|
2206
|
+
setCurrentTemplateTags
|
|
2207
|
+
}),
|
|
2208
|
+
[
|
|
2209
|
+
currentTemplateId,
|
|
2210
|
+
currentTemplateName,
|
|
2211
|
+
currentTemplateKind,
|
|
2212
|
+
currentTemplateTags,
|
|
2213
|
+
saveTemplate,
|
|
2214
|
+
loadTemplate,
|
|
2215
|
+
registerSaveListener,
|
|
2216
|
+
setCurrentTemplate,
|
|
2217
|
+
setCurrentTemplateTags
|
|
2218
|
+
]
|
|
2219
|
+
);
|
|
2220
|
+
return /* @__PURE__ */ React57.createElement(EmailEditorContext.Provider, { value }, children);
|
|
2202
2221
|
};
|
|
2203
2222
|
var useEmailEditor = () => {
|
|
2204
2223
|
const context = useContext(EmailEditorContext);
|
|
@@ -2212,20 +2231,20 @@ function ImageCallbacksProvider({
|
|
|
2212
2231
|
callbacks,
|
|
2213
2232
|
children
|
|
2214
2233
|
}) {
|
|
2215
|
-
return /* @__PURE__ */
|
|
2234
|
+
return /* @__PURE__ */ React57.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
|
|
2216
2235
|
}
|
|
2217
2236
|
function useImageCallbacks() {
|
|
2218
2237
|
return useContext(ImageCallbacksContext);
|
|
2219
2238
|
}
|
|
2220
2239
|
function BaseSidebarPanel({ title, children }) {
|
|
2221
|
-
return /* @__PURE__ */
|
|
2240
|
+
return /* @__PURE__ */ React57.createElement(Box, { p: 2 }, /* @__PURE__ */ React57.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React57.createElement(Stack, { spacing: 5, mb: 3 }, children));
|
|
2222
2241
|
}
|
|
2223
2242
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
2224
2243
|
const [value, setValue] = useState(defaultValue);
|
|
2225
2244
|
useEffect(() => {
|
|
2226
2245
|
setValue(defaultValue);
|
|
2227
2246
|
}, [defaultValue]);
|
|
2228
|
-
return /* @__PURE__ */
|
|
2247
|
+
return /* @__PURE__ */ React57.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2229
2248
|
ToggleButtonGroup,
|
|
2230
2249
|
{
|
|
2231
2250
|
exclusive: true,
|
|
@@ -2245,7 +2264,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
2245
2264
|
}
|
|
2246
2265
|
function RawSliderInput(_a) {
|
|
2247
2266
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
2248
|
-
return /* @__PURE__ */
|
|
2267
|
+
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
2268
|
Slider,
|
|
2250
2269
|
__spreadProps(__spreadValues({}, props), {
|
|
2251
2270
|
value,
|
|
@@ -2256,14 +2275,14 @@ function RawSliderInput(_a) {
|
|
|
2256
2275
|
setValue(value2);
|
|
2257
2276
|
}
|
|
2258
2277
|
})
|
|
2259
|
-
), /* @__PURE__ */
|
|
2278
|
+
), /* @__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
2279
|
}
|
|
2261
2280
|
|
|
2262
2281
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
2263
2282
|
function SliderInput(_a) {
|
|
2264
2283
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
2265
2284
|
const [value, setValue] = useState(defaultValue);
|
|
2266
|
-
return /* @__PURE__ */
|
|
2285
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2267
2286
|
RawSliderInput,
|
|
2268
2287
|
__spreadValues({
|
|
2269
2288
|
value,
|
|
@@ -2280,7 +2299,7 @@ function TextInput({ helperText, label, placeholder, rows, InputProps: InputProp
|
|
|
2280
2299
|
useEffect(() => {
|
|
2281
2300
|
setValue(defaultValue);
|
|
2282
2301
|
}, [defaultValue]);
|
|
2283
|
-
return /* @__PURE__ */
|
|
2302
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2284
2303
|
TextField,
|
|
2285
2304
|
{
|
|
2286
2305
|
fullWidth: true,
|
|
@@ -2306,7 +2325,7 @@ var TILE_BUTTON = {
|
|
|
2306
2325
|
};
|
|
2307
2326
|
function Swatch({ paletteColors, value, onChange }) {
|
|
2308
2327
|
const renderButton2 = (colorValue) => {
|
|
2309
|
-
return /* @__PURE__ */
|
|
2328
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2310
2329
|
Button$1,
|
|
2311
2330
|
{
|
|
2312
2331
|
key: colorValue,
|
|
@@ -2325,7 +2344,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
2325
2344
|
}
|
|
2326
2345
|
);
|
|
2327
2346
|
};
|
|
2328
|
-
return /* @__PURE__ */
|
|
2347
|
+
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
2348
|
}
|
|
2330
2349
|
|
|
2331
2350
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2392,7 +2411,7 @@ var SX = {
|
|
|
2392
2411
|
}
|
|
2393
2412
|
};
|
|
2394
2413
|
function Picker({ value, onChange }) {
|
|
2395
|
-
return /* @__PURE__ */
|
|
2414
|
+
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
2415
|
}
|
|
2397
2416
|
|
|
2398
2417
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2417,7 +2436,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2417
2436
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2418
2437
|
return null;
|
|
2419
2438
|
}
|
|
2420
|
-
return /* @__PURE__ */
|
|
2439
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2421
2440
|
ButtonBase,
|
|
2422
2441
|
{
|
|
2423
2442
|
onClick: () => {
|
|
@@ -2425,16 +2444,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2425
2444
|
onChange(null);
|
|
2426
2445
|
}
|
|
2427
2446
|
},
|
|
2428
|
-
/* @__PURE__ */
|
|
2447
|
+
/* @__PURE__ */ React57.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2429
2448
|
);
|
|
2430
2449
|
};
|
|
2431
2450
|
const renderOpenButton = () => {
|
|
2432
2451
|
if (value) {
|
|
2433
|
-
return /* @__PURE__ */
|
|
2452
|
+
return /* @__PURE__ */ React57.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2434
2453
|
}
|
|
2435
|
-
return /* @__PURE__ */
|
|
2454
|
+
return /* @__PURE__ */ React57.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" }));
|
|
2436
2455
|
};
|
|
2437
|
-
return /* @__PURE__ */
|
|
2456
|
+
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
2457
|
Menu,
|
|
2439
2458
|
{
|
|
2440
2459
|
anchorEl,
|
|
@@ -2444,7 +2463,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2444
2463
|
sx: { height: "auto", padding: 0 }
|
|
2445
2464
|
}
|
|
2446
2465
|
},
|
|
2447
|
-
/* @__PURE__ */
|
|
2466
|
+
/* @__PURE__ */ React57.createElement(
|
|
2448
2467
|
Picker,
|
|
2449
2468
|
{
|
|
2450
2469
|
value: value || "",
|
|
@@ -2459,10 +2478,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2459
2478
|
|
|
2460
2479
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2461
2480
|
function ColorInput2(props) {
|
|
2462
|
-
return /* @__PURE__ */
|
|
2481
|
+
return /* @__PURE__ */ React57.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2463
2482
|
}
|
|
2464
2483
|
function NullableColorInput(props) {
|
|
2465
|
-
return /* @__PURE__ */
|
|
2484
|
+
return /* @__PURE__ */ React57.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2466
2485
|
}
|
|
2467
2486
|
|
|
2468
2487
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2515,13 +2534,13 @@ var FONT_FAMILIES = [
|
|
|
2515
2534
|
];
|
|
2516
2535
|
|
|
2517
2536
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2518
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2537
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React57.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2519
2538
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2520
2539
|
const [value, setValue] = useState(defaultValue != null ? defaultValue : "inherit");
|
|
2521
2540
|
useEffect(() => {
|
|
2522
2541
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2523
2542
|
}, [defaultValue]);
|
|
2524
|
-
return /* @__PURE__ */
|
|
2543
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2525
2544
|
TextField,
|
|
2526
2545
|
{
|
|
2527
2546
|
select: true,
|
|
@@ -2534,7 +2553,7 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2534
2553
|
onChange(v === null ? null : v);
|
|
2535
2554
|
}
|
|
2536
2555
|
},
|
|
2537
|
-
/* @__PURE__ */
|
|
2556
|
+
/* @__PURE__ */ React57.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2538
2557
|
OPTIONS
|
|
2539
2558
|
);
|
|
2540
2559
|
}
|
|
@@ -2547,10 +2566,10 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2547
2566
|
setValue(value2);
|
|
2548
2567
|
onChange(value2);
|
|
2549
2568
|
};
|
|
2550
|
-
return /* @__PURE__ */
|
|
2569
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2551
2570
|
RawSliderInput,
|
|
2552
2571
|
{
|
|
2553
|
-
iconLabel: /* @__PURE__ */
|
|
2572
|
+
iconLabel: /* @__PURE__ */ React57.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2554
2573
|
value,
|
|
2555
2574
|
setValue: handleChange,
|
|
2556
2575
|
units: "px",
|
|
@@ -2565,7 +2584,7 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2565
2584
|
useEffect(() => {
|
|
2566
2585
|
setValue(defaultValue);
|
|
2567
2586
|
}, [defaultValue]);
|
|
2568
|
-
return /* @__PURE__ */
|
|
2587
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2569
2588
|
RadioGroupInput,
|
|
2570
2589
|
{
|
|
2571
2590
|
label,
|
|
@@ -2575,8 +2594,8 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2575
2594
|
onChange(fontWeight);
|
|
2576
2595
|
}
|
|
2577
2596
|
},
|
|
2578
|
-
/* @__PURE__ */
|
|
2579
|
-
/* @__PURE__ */
|
|
2597
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "normal" }, "Regular"),
|
|
2598
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "bold" }, "Bold")
|
|
2580
2599
|
);
|
|
2581
2600
|
}
|
|
2582
2601
|
function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
@@ -2588,10 +2607,10 @@ function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
|
2588
2607
|
setValue(v);
|
|
2589
2608
|
onChange(v === 0 ? null : v);
|
|
2590
2609
|
};
|
|
2591
|
-
return /* @__PURE__ */
|
|
2610
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2592
2611
|
RawSliderInput,
|
|
2593
2612
|
{
|
|
2594
|
-
iconLabel: /* @__PURE__ */
|
|
2613
|
+
iconLabel: /* @__PURE__ */ React57.createElement(SpaceBarOutlined, { sx: { fontSize: 16 } }),
|
|
2595
2614
|
value,
|
|
2596
2615
|
setValue: handleChange,
|
|
2597
2616
|
units: "px",
|
|
@@ -2610,10 +2629,10 @@ function LineHeightInput({ label, defaultValue, onChange }) {
|
|
|
2610
2629
|
setValue(v);
|
|
2611
2630
|
onChange(v === 0 ? null : v);
|
|
2612
2631
|
};
|
|
2613
|
-
return /* @__PURE__ */
|
|
2632
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2614
2633
|
RawSliderInput,
|
|
2615
2634
|
{
|
|
2616
|
-
iconLabel: /* @__PURE__ */
|
|
2635
|
+
iconLabel: /* @__PURE__ */ React57.createElement(FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
|
|
2617
2636
|
value,
|
|
2618
2637
|
setValue: handleChange,
|
|
2619
2638
|
units: "",
|
|
@@ -2642,10 +2661,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2642
2661
|
setValue(v);
|
|
2643
2662
|
onChange(v);
|
|
2644
2663
|
}
|
|
2645
|
-
return /* @__PURE__ */
|
|
2664
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React57.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React57.createElement(
|
|
2646
2665
|
RawSliderInput,
|
|
2647
2666
|
{
|
|
2648
|
-
iconLabel: /* @__PURE__ */
|
|
2667
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2649
2668
|
value: value.top,
|
|
2650
2669
|
setValue: (num) => handleChange("top", num),
|
|
2651
2670
|
units: "px",
|
|
@@ -2654,10 +2673,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2654
2673
|
max: 80,
|
|
2655
2674
|
marks: true
|
|
2656
2675
|
}
|
|
2657
|
-
), /* @__PURE__ */
|
|
2676
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2658
2677
|
RawSliderInput,
|
|
2659
2678
|
{
|
|
2660
|
-
iconLabel: /* @__PURE__ */
|
|
2679
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2661
2680
|
value: value.bottom,
|
|
2662
2681
|
setValue: (num) => handleChange("bottom", num),
|
|
2663
2682
|
units: "px",
|
|
@@ -2666,10 +2685,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2666
2685
|
max: 80,
|
|
2667
2686
|
marks: true
|
|
2668
2687
|
}
|
|
2669
|
-
), /* @__PURE__ */
|
|
2688
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2670
2689
|
RawSliderInput,
|
|
2671
2690
|
{
|
|
2672
|
-
iconLabel: /* @__PURE__ */
|
|
2691
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2673
2692
|
value: value.left,
|
|
2674
2693
|
setValue: (num) => handleChange("left", num),
|
|
2675
2694
|
units: "px",
|
|
@@ -2678,10 +2697,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2678
2697
|
max: 80,
|
|
2679
2698
|
marks: true
|
|
2680
2699
|
}
|
|
2681
|
-
), /* @__PURE__ */
|
|
2700
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2682
2701
|
RawSliderInput,
|
|
2683
2702
|
{
|
|
2684
|
-
iconLabel: /* @__PURE__ */
|
|
2703
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2685
2704
|
value: value.right,
|
|
2686
2705
|
setValue: (num) => handleChange("right", num),
|
|
2687
2706
|
units: "px",
|
|
@@ -2697,7 +2716,7 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2697
2716
|
useEffect(() => {
|
|
2698
2717
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2699
2718
|
}, [defaultValue]);
|
|
2700
|
-
return /* @__PURE__ */
|
|
2719
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2701
2720
|
RadioGroupInput,
|
|
2702
2721
|
{
|
|
2703
2722
|
label,
|
|
@@ -2707,9 +2726,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2707
2726
|
onChange(value2);
|
|
2708
2727
|
}
|
|
2709
2728
|
},
|
|
2710
|
-
/* @__PURE__ */
|
|
2711
|
-
/* @__PURE__ */
|
|
2712
|
-
/* @__PURE__ */
|
|
2729
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React57.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2730
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React57.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2731
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React57.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2713
2732
|
);
|
|
2714
2733
|
}
|
|
2715
2734
|
|
|
@@ -2722,14 +2741,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2722
2741
|
};
|
|
2723
2742
|
switch (name) {
|
|
2724
2743
|
case "backgroundColor":
|
|
2725
|
-
return /* @__PURE__ */
|
|
2744
|
+
return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
|
|
2726
2745
|
case "borderColor":
|
|
2727
|
-
return /* @__PURE__ */
|
|
2746
|
+
return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
|
|
2728
2747
|
case "borderRadius":
|
|
2729
|
-
return /* @__PURE__ */
|
|
2748
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2730
2749
|
SliderInput,
|
|
2731
2750
|
{
|
|
2732
|
-
iconLabel: /* @__PURE__ */
|
|
2751
|
+
iconLabel: /* @__PURE__ */ React57.createElement(RoundedCornerOutlined, null),
|
|
2733
2752
|
units: "px",
|
|
2734
2753
|
step: 4,
|
|
2735
2754
|
marks: true,
|
|
@@ -2741,27 +2760,27 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2741
2760
|
}
|
|
2742
2761
|
);
|
|
2743
2762
|
case "color":
|
|
2744
|
-
return /* @__PURE__ */
|
|
2763
|
+
return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
|
|
2745
2764
|
case "fontFamily":
|
|
2746
|
-
return /* @__PURE__ */
|
|
2765
|
+
return /* @__PURE__ */ React57.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
|
|
2747
2766
|
case "fontSize":
|
|
2748
|
-
return /* @__PURE__ */
|
|
2767
|
+
return /* @__PURE__ */ React57.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
|
|
2749
2768
|
case "fontWeight":
|
|
2750
|
-
return /* @__PURE__ */
|
|
2769
|
+
return /* @__PURE__ */ React57.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
|
|
2751
2770
|
case "lineHeight":
|
|
2752
|
-
return /* @__PURE__ */
|
|
2771
|
+
return /* @__PURE__ */ React57.createElement(LineHeightInput, { label: "Line height", defaultValue, onChange: handleChange });
|
|
2753
2772
|
case "letterSpacing":
|
|
2754
|
-
return /* @__PURE__ */
|
|
2773
|
+
return /* @__PURE__ */ React57.createElement(LetterSpacingInput, { label: "Letter spacing", defaultValue, onChange: handleChange });
|
|
2755
2774
|
case "textAlign":
|
|
2756
|
-
return /* @__PURE__ */
|
|
2775
|
+
return /* @__PURE__ */ React57.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
|
|
2757
2776
|
case "padding":
|
|
2758
|
-
return /* @__PURE__ */
|
|
2777
|
+
return /* @__PURE__ */ React57.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
|
|
2759
2778
|
}
|
|
2760
2779
|
}
|
|
2761
2780
|
|
|
2762
2781
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2763
2782
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2764
|
-
return /* @__PURE__ */
|
|
2783
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, names.map((name) => /* @__PURE__ */ React57.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2765
2784
|
}
|
|
2766
2785
|
|
|
2767
2786
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
@@ -2781,11 +2800,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2781
2800
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2782
2801
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2783
2802
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2784
|
-
return /* @__PURE__ */
|
|
2803
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React57.createElement(
|
|
2785
2804
|
SliderInput,
|
|
2786
2805
|
{
|
|
2787
2806
|
label: "Size",
|
|
2788
|
-
iconLabel: /* @__PURE__ */
|
|
2807
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2789
2808
|
units: "px",
|
|
2790
2809
|
step: 3,
|
|
2791
2810
|
min: 32,
|
|
@@ -2795,7 +2814,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2795
2814
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2796
2815
|
}
|
|
2797
2816
|
}
|
|
2798
|
-
), /* @__PURE__ */
|
|
2817
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2799
2818
|
RadioGroupInput,
|
|
2800
2819
|
{
|
|
2801
2820
|
label: "Shape",
|
|
@@ -2804,10 +2823,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2804
2823
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2805
2824
|
}
|
|
2806
2825
|
},
|
|
2807
|
-
/* @__PURE__ */
|
|
2808
|
-
/* @__PURE__ */
|
|
2809
|
-
/* @__PURE__ */
|
|
2810
|
-
), /* @__PURE__ */
|
|
2826
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "circle" }, "Circle"),
|
|
2827
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "square" }, "Square"),
|
|
2828
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rounded" }, "Rounded")
|
|
2829
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2811
2830
|
TextInput,
|
|
2812
2831
|
{
|
|
2813
2832
|
label: "Image URL",
|
|
@@ -2816,7 +2835,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2816
2835
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2817
2836
|
}
|
|
2818
2837
|
}
|
|
2819
|
-
), /* @__PURE__ */
|
|
2838
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2820
2839
|
TextInput,
|
|
2821
2840
|
{
|
|
2822
2841
|
label: "Alt text",
|
|
@@ -2825,7 +2844,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2825
2844
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2826
2845
|
}
|
|
2827
2846
|
}
|
|
2828
|
-
), /* @__PURE__ */
|
|
2847
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2829
2848
|
MultiStylePropertyPanel,
|
|
2830
2849
|
{
|
|
2831
2850
|
names: ["textAlign", "padding"],
|
|
@@ -2853,65 +2872,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2853
2872
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2854
2873
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2855
2874
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2856
|
-
return /* @__PURE__ */
|
|
2875
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React57.createElement(
|
|
2857
2876
|
TextInput,
|
|
2858
2877
|
{
|
|
2859
2878
|
label: "Text",
|
|
2860
2879
|
defaultValue: text,
|
|
2861
2880
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2862
2881
|
}
|
|
2863
|
-
), /* @__PURE__ */
|
|
2882
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2864
2883
|
TextInput,
|
|
2865
2884
|
{
|
|
2866
2885
|
label: "Url",
|
|
2867
2886
|
defaultValue: url,
|
|
2868
2887
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2869
2888
|
}
|
|
2870
|
-
), /* @__PURE__ */
|
|
2889
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2871
2890
|
RadioGroupInput,
|
|
2872
2891
|
{
|
|
2873
2892
|
label: "Width",
|
|
2874
2893
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2875
2894
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2876
2895
|
},
|
|
2877
|
-
/* @__PURE__ */
|
|
2878
|
-
/* @__PURE__ */
|
|
2879
|
-
), /* @__PURE__ */
|
|
2896
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
|
|
2897
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "AUTO" }, "Auto")
|
|
2898
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2880
2899
|
RadioGroupInput,
|
|
2881
2900
|
{
|
|
2882
2901
|
label: "Size",
|
|
2883
2902
|
defaultValue: size,
|
|
2884
2903
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2885
2904
|
},
|
|
2886
|
-
/* @__PURE__ */
|
|
2887
|
-
/* @__PURE__ */
|
|
2888
|
-
/* @__PURE__ */
|
|
2889
|
-
/* @__PURE__ */
|
|
2890
|
-
), /* @__PURE__ */
|
|
2905
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "x-small" }, "Xs"),
|
|
2906
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "small" }, "Sm"),
|
|
2907
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "medium" }, "Md"),
|
|
2908
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "large" }, "Lg")
|
|
2909
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2891
2910
|
RadioGroupInput,
|
|
2892
2911
|
{
|
|
2893
2912
|
label: "Style",
|
|
2894
2913
|
defaultValue: buttonStyle,
|
|
2895
2914
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2896
2915
|
},
|
|
2897
|
-
/* @__PURE__ */
|
|
2898
|
-
/* @__PURE__ */
|
|
2899
|
-
/* @__PURE__ */
|
|
2900
|
-
), /* @__PURE__ */
|
|
2916
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
|
|
2917
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
|
|
2918
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "pill" }, "Pill")
|
|
2919
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2901
2920
|
ColorInput2,
|
|
2902
2921
|
{
|
|
2903
2922
|
label: "Text color",
|
|
2904
2923
|
defaultValue: buttonTextColor,
|
|
2905
2924
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2906
2925
|
}
|
|
2907
|
-
), /* @__PURE__ */
|
|
2926
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2908
2927
|
ColorInput2,
|
|
2909
2928
|
{
|
|
2910
2929
|
label: "Button color",
|
|
2911
2930
|
defaultValue: buttonBackgroundColor,
|
|
2912
2931
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2913
2932
|
}
|
|
2914
|
-
), /* @__PURE__ */
|
|
2933
|
+
), /* @__PURE__ */ React57.createElement(
|
|
2915
2934
|
MultiStylePropertyPanel,
|
|
2916
2935
|
{
|
|
2917
2936
|
names: [
|
|
@@ -2946,7 +2965,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2946
2965
|
const value = parseInt(ev.target.value);
|
|
2947
2966
|
onChange(isNaN(value) ? null : value);
|
|
2948
2967
|
};
|
|
2949
|
-
return /* @__PURE__ */
|
|
2968
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2950
2969
|
TextField,
|
|
2951
2970
|
{
|
|
2952
2971
|
fullWidth: true,
|
|
@@ -2957,7 +2976,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2957
2976
|
placeholder: "auto",
|
|
2958
2977
|
size: "small",
|
|
2959
2978
|
InputProps: {
|
|
2960
|
-
endAdornment: /* @__PURE__ */
|
|
2979
|
+
endAdornment: /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2961
2980
|
}
|
|
2962
2981
|
}
|
|
2963
2982
|
);
|
|
@@ -2979,7 +2998,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2979
2998
|
};
|
|
2980
2999
|
let column3 = null;
|
|
2981
3000
|
{
|
|
2982
|
-
column3 = /* @__PURE__ */
|
|
3001
|
+
column3 = /* @__PURE__ */ React57.createElement(
|
|
2983
3002
|
TextDimensionInput,
|
|
2984
3003
|
{
|
|
2985
3004
|
label: "Column 3",
|
|
@@ -2990,7 +3009,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2990
3009
|
}
|
|
2991
3010
|
);
|
|
2992
3011
|
}
|
|
2993
|
-
return /* @__PURE__ */
|
|
3012
|
+
return /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React57.createElement(
|
|
2994
3013
|
TextDimensionInput,
|
|
2995
3014
|
{
|
|
2996
3015
|
label: "Column 1",
|
|
@@ -2999,7 +3018,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2999
3018
|
setIndexValue(0, v);
|
|
3000
3019
|
}
|
|
3001
3020
|
}
|
|
3002
|
-
), /* @__PURE__ */
|
|
3021
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3003
3022
|
TextDimensionInput,
|
|
3004
3023
|
{
|
|
3005
3024
|
label: "Column 2",
|
|
@@ -3024,7 +3043,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3024
3043
|
setErrors(res.error);
|
|
3025
3044
|
}
|
|
3026
3045
|
};
|
|
3027
|
-
return /* @__PURE__ */
|
|
3046
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React57.createElement(
|
|
3028
3047
|
RadioGroupInput,
|
|
3029
3048
|
{
|
|
3030
3049
|
label: "Number of columns",
|
|
@@ -3033,9 +3052,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3033
3052
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
3034
3053
|
}
|
|
3035
3054
|
},
|
|
3036
|
-
/* @__PURE__ */
|
|
3037
|
-
/* @__PURE__ */
|
|
3038
|
-
), /* @__PURE__ */
|
|
3055
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "2" }, "2"),
|
|
3056
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "3" }, "3")
|
|
3057
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3039
3058
|
ColumnWidthsInput,
|
|
3040
3059
|
{
|
|
3041
3060
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -3043,11 +3062,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3043
3062
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
3044
3063
|
}
|
|
3045
3064
|
}
|
|
3046
|
-
), /* @__PURE__ */
|
|
3065
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3047
3066
|
SliderInput,
|
|
3048
3067
|
{
|
|
3049
3068
|
label: "Columns gap",
|
|
3050
|
-
iconLabel: /* @__PURE__ */
|
|
3069
|
+
iconLabel: /* @__PURE__ */ React57.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
3051
3070
|
units: "px",
|
|
3052
3071
|
step: 4,
|
|
3053
3072
|
marks: true,
|
|
@@ -3056,7 +3075,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3056
3075
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
3057
3076
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
3058
3077
|
}
|
|
3059
|
-
), /* @__PURE__ */
|
|
3078
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3060
3079
|
RadioGroupInput,
|
|
3061
3080
|
{
|
|
3062
3081
|
label: "Alignment",
|
|
@@ -3065,10 +3084,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3065
3084
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
3066
3085
|
}
|
|
3067
3086
|
},
|
|
3068
|
-
/* @__PURE__ */
|
|
3069
|
-
/* @__PURE__ */
|
|
3070
|
-
/* @__PURE__ */
|
|
3071
|
-
), /* @__PURE__ */
|
|
3087
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React57.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3088
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React57.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3089
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React57.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3090
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3072
3091
|
MultiStylePropertyPanel,
|
|
3073
3092
|
{
|
|
3074
3093
|
names: ["backgroundColor", "padding"],
|
|
@@ -3097,7 +3116,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3097
3116
|
setErrors(res.error);
|
|
3098
3117
|
}
|
|
3099
3118
|
};
|
|
3100
|
-
return /* @__PURE__ */
|
|
3119
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React57.createElement(
|
|
3101
3120
|
MultiStylePropertyPanel,
|
|
3102
3121
|
{
|
|
3103
3122
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -3120,18 +3139,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3120
3139
|
};
|
|
3121
3140
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
3122
3141
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
3123
|
-
return /* @__PURE__ */
|
|
3142
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React57.createElement(
|
|
3124
3143
|
ColorInput2,
|
|
3125
3144
|
{
|
|
3126
3145
|
label: "Color",
|
|
3127
3146
|
defaultValue: lineColor,
|
|
3128
3147
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
3129
3148
|
}
|
|
3130
|
-
), /* @__PURE__ */
|
|
3149
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3131
3150
|
SliderInput,
|
|
3132
3151
|
{
|
|
3133
3152
|
label: "Height",
|
|
3134
|
-
iconLabel: /* @__PURE__ */
|
|
3153
|
+
iconLabel: /* @__PURE__ */ React57.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3135
3154
|
units: "px",
|
|
3136
3155
|
step: 1,
|
|
3137
3156
|
min: 1,
|
|
@@ -3139,7 +3158,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3139
3158
|
defaultValue: lineHeight,
|
|
3140
3159
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
3141
3160
|
}
|
|
3142
|
-
), /* @__PURE__ */
|
|
3161
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3143
3162
|
MultiStylePropertyPanel,
|
|
3144
3163
|
{
|
|
3145
3164
|
names: ["backgroundColor", "padding"],
|
|
@@ -3183,11 +3202,11 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3183
3202
|
useEffect(() => {
|
|
3184
3203
|
setValue(defaultValue);
|
|
3185
3204
|
}, [defaultValue]);
|
|
3186
|
-
return /* @__PURE__ */
|
|
3205
|
+
return /* @__PURE__ */ React57.createElement(
|
|
3187
3206
|
FormControlLabel,
|
|
3188
3207
|
{
|
|
3189
3208
|
label,
|
|
3190
|
-
control: /* @__PURE__ */
|
|
3209
|
+
control: /* @__PURE__ */ React57.createElement(
|
|
3191
3210
|
Switch,
|
|
3192
3211
|
{
|
|
3193
3212
|
checked: value,
|
|
@@ -3215,38 +3234,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3215
3234
|
}
|
|
3216
3235
|
};
|
|
3217
3236
|
const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
|
|
3218
|
-
return /* @__PURE__ */
|
|
3237
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React57.createElement(
|
|
3219
3238
|
BooleanInput,
|
|
3220
3239
|
{
|
|
3221
3240
|
label: "Disable backdrop",
|
|
3222
3241
|
defaultValue: backdropDisabled,
|
|
3223
3242
|
onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
|
|
3224
3243
|
}
|
|
3225
|
-
), !backdropDisabled && /* @__PURE__ */
|
|
3244
|
+
), !backdropDisabled && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
3226
3245
|
ColorInput2,
|
|
3227
3246
|
{
|
|
3228
3247
|
label: "Backdrop color",
|
|
3229
3248
|
defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
|
|
3230
3249
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
3231
3250
|
}
|
|
3232
|
-
), /* @__PURE__ */
|
|
3251
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3233
3252
|
ColorInput2,
|
|
3234
3253
|
{
|
|
3235
3254
|
label: "Canvas color",
|
|
3236
3255
|
defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
|
|
3237
3256
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
3238
3257
|
}
|
|
3239
|
-
), /* @__PURE__ */
|
|
3258
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3240
3259
|
NullableColorInput,
|
|
3241
3260
|
{
|
|
3242
3261
|
label: "Canvas border color",
|
|
3243
3262
|
defaultValue: (_d = data.borderColor) != null ? _d : null,
|
|
3244
3263
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
3245
3264
|
}
|
|
3246
|
-
), /* @__PURE__ */
|
|
3265
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3247
3266
|
SliderInput,
|
|
3248
3267
|
{
|
|
3249
|
-
iconLabel: /* @__PURE__ */
|
|
3268
|
+
iconLabel: /* @__PURE__ */ React57.createElement(RoundedCornerOutlined, null),
|
|
3250
3269
|
units: "px",
|
|
3251
3270
|
step: 4,
|
|
3252
3271
|
marks: true,
|
|
@@ -3256,14 +3275,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3256
3275
|
defaultValue: (_e = data.borderRadius) != null ? _e : 0,
|
|
3257
3276
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
3258
3277
|
}
|
|
3259
|
-
)), /* @__PURE__ */
|
|
3278
|
+
)), /* @__PURE__ */ React57.createElement(
|
|
3260
3279
|
NullableFontFamily,
|
|
3261
3280
|
{
|
|
3262
3281
|
label: "Font family",
|
|
3263
3282
|
defaultValue: "MODERN_SANS",
|
|
3264
3283
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
3265
3284
|
}
|
|
3266
|
-
), /* @__PURE__ */
|
|
3285
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3267
3286
|
ColorInput2,
|
|
3268
3287
|
{
|
|
3269
3288
|
label: "Text color",
|
|
@@ -3284,7 +3303,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3284
3303
|
setErrors(res.error);
|
|
3285
3304
|
}
|
|
3286
3305
|
};
|
|
3287
|
-
return /* @__PURE__ */
|
|
3306
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React57.createElement(
|
|
3288
3307
|
TextInput,
|
|
3289
3308
|
{
|
|
3290
3309
|
label: "Content",
|
|
@@ -3294,7 +3313,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3294
3313
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
3295
3314
|
}
|
|
3296
3315
|
}
|
|
3297
|
-
), /* @__PURE__ */
|
|
3316
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3298
3317
|
RadioGroupInput,
|
|
3299
3318
|
{
|
|
3300
3319
|
label: "Level",
|
|
@@ -3303,10 +3322,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3303
3322
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
3304
3323
|
}
|
|
3305
3324
|
},
|
|
3306
|
-
/* @__PURE__ */
|
|
3307
|
-
/* @__PURE__ */
|
|
3308
|
-
/* @__PURE__ */
|
|
3309
|
-
), /* @__PURE__ */
|
|
3325
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "h1" }, "H1"),
|
|
3326
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "h2" }, "H2"),
|
|
3327
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "h3" }, "H3")
|
|
3328
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3310
3329
|
MultiStylePropertyPanel,
|
|
3311
3330
|
{
|
|
3312
3331
|
names: [
|
|
@@ -3336,7 +3355,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3336
3355
|
setErrors(res.error);
|
|
3337
3356
|
}
|
|
3338
3357
|
};
|
|
3339
|
-
return /* @__PURE__ */
|
|
3358
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React57.createElement(
|
|
3340
3359
|
TextInput,
|
|
3341
3360
|
{
|
|
3342
3361
|
label: "Content",
|
|
@@ -3344,7 +3363,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3344
3363
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
3345
3364
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
3346
3365
|
}
|
|
3347
|
-
), /* @__PURE__ */
|
|
3366
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3348
3367
|
MultiStylePropertyPanel,
|
|
3349
3368
|
{
|
|
3350
3369
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -3401,7 +3420,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3401
3420
|
setBusy(false);
|
|
3402
3421
|
}
|
|
3403
3422
|
});
|
|
3404
|
-
return /* @__PURE__ */
|
|
3423
|
+
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
3424
|
TextField,
|
|
3406
3425
|
{
|
|
3407
3426
|
fullWidth: true,
|
|
@@ -3411,11 +3430,11 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3411
3430
|
onChange: (e) => setQuery(e.target.value),
|
|
3412
3431
|
autoFocus: true,
|
|
3413
3432
|
InputProps: {
|
|
3414
|
-
startAdornment: /* @__PURE__ */
|
|
3433
|
+
startAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React57.createElement(SearchOutlined, { fontSize: "small" }))
|
|
3415
3434
|
},
|
|
3416
3435
|
sx: { mb: 2 }
|
|
3417
3436
|
}
|
|
3418
|
-
), error && /* @__PURE__ */
|
|
3437
|
+
), 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
3438
|
Box,
|
|
3420
3439
|
{
|
|
3421
3440
|
sx: {
|
|
@@ -3424,7 +3443,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3424
3443
|
gap: 1.5
|
|
3425
3444
|
}
|
|
3426
3445
|
},
|
|
3427
|
-
filtered.map((img) => /* @__PURE__ */
|
|
3446
|
+
filtered.map((img) => /* @__PURE__ */ React57.createElement(
|
|
3428
3447
|
ImageTile,
|
|
3429
3448
|
{
|
|
3430
3449
|
key: img.url,
|
|
@@ -3433,7 +3452,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3433
3452
|
onDelete: deleteImage ? () => handleDelete(img.url) : void 0
|
|
3434
3453
|
}
|
|
3435
3454
|
))
|
|
3436
|
-
)), /* @__PURE__ */
|
|
3455
|
+
)), /* @__PURE__ */ React57.createElement(DialogActions, null, /* @__PURE__ */ React57.createElement(Button$1, { onClick: onClose }, "Close")));
|
|
3437
3456
|
}
|
|
3438
3457
|
function ImageTile({
|
|
3439
3458
|
image,
|
|
@@ -3443,7 +3462,7 @@ function ImageTile({
|
|
|
3443
3462
|
var _a, _b;
|
|
3444
3463
|
const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
|
|
3445
3464
|
const label = image.alt || image.url.split("/").pop() || "image";
|
|
3446
|
-
return /* @__PURE__ */
|
|
3465
|
+
return /* @__PURE__ */ React57.createElement(
|
|
3447
3466
|
Box,
|
|
3448
3467
|
{
|
|
3449
3468
|
sx: {
|
|
@@ -3459,7 +3478,7 @@ function ImageTile({
|
|
|
3459
3478
|
},
|
|
3460
3479
|
onClick: onPick
|
|
3461
3480
|
},
|
|
3462
|
-
/* @__PURE__ */
|
|
3481
|
+
/* @__PURE__ */ React57.createElement(
|
|
3463
3482
|
Box,
|
|
3464
3483
|
{
|
|
3465
3484
|
component: "img",
|
|
@@ -3468,8 +3487,8 @@ function ImageTile({
|
|
|
3468
3487
|
sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
|
|
3469
3488
|
}
|
|
3470
3489
|
),
|
|
3471
|
-
/* @__PURE__ */
|
|
3472
|
-
onDelete && /* @__PURE__ */
|
|
3490
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
|
|
3491
|
+
onDelete && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React57.createElement(
|
|
3473
3492
|
IconButton,
|
|
3474
3493
|
{
|
|
3475
3494
|
size: "small",
|
|
@@ -3489,7 +3508,7 @@ function ImageTile({
|
|
|
3489
3508
|
},
|
|
3490
3509
|
"aria-label": "Delete image"
|
|
3491
3510
|
},
|
|
3492
|
-
/* @__PURE__ */
|
|
3511
|
+
/* @__PURE__ */ React57.createElement(DeleteOutline, { fontSize: "small" })
|
|
3493
3512
|
))
|
|
3494
3513
|
);
|
|
3495
3514
|
}
|
|
@@ -3542,13 +3561,13 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3542
3561
|
});
|
|
3543
3562
|
const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
|
|
3544
3563
|
const showHttpWarning = isHttpUrl(url);
|
|
3545
|
-
return /* @__PURE__ */
|
|
3564
|
+
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
3565
|
Button$1,
|
|
3547
3566
|
{
|
|
3548
3567
|
fullWidth: true,
|
|
3549
3568
|
variant: "outlined",
|
|
3550
3569
|
size: "small",
|
|
3551
|
-
startIcon: uploading ? /* @__PURE__ */
|
|
3570
|
+
startIcon: uploading ? /* @__PURE__ */ React57.createElement(CircularProgress, { size: 14 }) : /* @__PURE__ */ React57.createElement(CloudUploadOutlined, { fontSize: "small" }),
|
|
3552
3571
|
disabled: uploading,
|
|
3553
3572
|
onClick: () => {
|
|
3554
3573
|
var _a2;
|
|
@@ -3556,7 +3575,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3556
3575
|
}
|
|
3557
3576
|
},
|
|
3558
3577
|
uploading ? "Uploading\u2026" : "Upload"
|
|
3559
|
-
), /* @__PURE__ */
|
|
3578
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3560
3579
|
"input",
|
|
3561
3580
|
{
|
|
3562
3581
|
ref: fileInputRef,
|
|
@@ -3570,17 +3589,17 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3570
3589
|
if (file) yield handleFile(file);
|
|
3571
3590
|
})
|
|
3572
3591
|
}
|
|
3573
|
-
)), loadImages && /* @__PURE__ */
|
|
3592
|
+
)), loadImages && /* @__PURE__ */ React57.createElement(
|
|
3574
3593
|
Button$1,
|
|
3575
3594
|
{
|
|
3576
3595
|
fullWidth: true,
|
|
3577
3596
|
variant: "outlined",
|
|
3578
3597
|
size: "small",
|
|
3579
|
-
startIcon: /* @__PURE__ */
|
|
3598
|
+
startIcon: /* @__PURE__ */ React57.createElement(CollectionsOutlined, { fontSize: "small" }),
|
|
3580
3599
|
onClick: () => setLibraryOpen(true)
|
|
3581
3600
|
},
|
|
3582
3601
|
"Library"
|
|
3583
|
-
)), uploadError && /* @__PURE__ */
|
|
3602
|
+
)), uploadError && /* @__PURE__ */ React57.createElement(Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React57.createElement(
|
|
3584
3603
|
TextInput,
|
|
3585
3604
|
{
|
|
3586
3605
|
label: "Source URL",
|
|
@@ -3590,14 +3609,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3590
3609
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
|
|
3591
3610
|
}
|
|
3592
3611
|
}
|
|
3593
|
-
), showHttpWarning && /* @__PURE__ */
|
|
3612
|
+
), 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
3613
|
TextInput,
|
|
3595
3614
|
{
|
|
3596
3615
|
label: "Alt text",
|
|
3597
3616
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
3598
3617
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
3599
3618
|
}
|
|
3600
|
-
), /* @__PURE__ */
|
|
3619
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3601
3620
|
TextInput,
|
|
3602
3621
|
{
|
|
3603
3622
|
label: "Click through URL",
|
|
@@ -3607,38 +3626,38 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3607
3626
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
3608
3627
|
}
|
|
3609
3628
|
}
|
|
3610
|
-
), /* @__PURE__ */
|
|
3629
|
+
), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(
|
|
3611
3630
|
TextDimensionInput,
|
|
3612
3631
|
{
|
|
3613
3632
|
label: "Width",
|
|
3614
3633
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
3615
3634
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
3616
3635
|
}
|
|
3617
|
-
), /* @__PURE__ */
|
|
3636
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3618
3637
|
TextDimensionInput,
|
|
3619
3638
|
{
|
|
3620
3639
|
label: "Height",
|
|
3621
3640
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
3622
3641
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
3623
3642
|
}
|
|
3624
|
-
)), /* @__PURE__ */
|
|
3643
|
+
)), /* @__PURE__ */ React57.createElement(
|
|
3625
3644
|
RadioGroupInput,
|
|
3626
3645
|
{
|
|
3627
3646
|
label: "Alignment",
|
|
3628
3647
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
3629
3648
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
3630
3649
|
},
|
|
3631
|
-
/* @__PURE__ */
|
|
3632
|
-
/* @__PURE__ */
|
|
3633
|
-
/* @__PURE__ */
|
|
3634
|
-
), /* @__PURE__ */
|
|
3650
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React57.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3651
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React57.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3652
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React57.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3653
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3635
3654
|
MultiStylePropertyPanel,
|
|
3636
3655
|
{
|
|
3637
3656
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
3638
3657
|
value: data.style,
|
|
3639
3658
|
onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
|
|
3640
3659
|
}
|
|
3641
|
-
), loadImages && /* @__PURE__ */
|
|
3660
|
+
), loadImages && /* @__PURE__ */ React57.createElement(
|
|
3642
3661
|
ImageLibraryDialog,
|
|
3643
3662
|
{
|
|
3644
3663
|
open: libraryOpen,
|
|
@@ -3677,74 +3696,74 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3677
3696
|
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3678
3697
|
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3679
3698
|
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3680
|
-
return /* @__PURE__ */
|
|
3699
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React57.createElement(
|
|
3681
3700
|
TextInput,
|
|
3682
3701
|
{
|
|
3683
3702
|
label: "Greeting",
|
|
3684
3703
|
defaultValue: greeting,
|
|
3685
3704
|
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3686
3705
|
}
|
|
3687
|
-
), /* @__PURE__ */
|
|
3706
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3688
3707
|
TextInput,
|
|
3689
3708
|
{
|
|
3690
3709
|
label: "Name",
|
|
3691
3710
|
defaultValue: name,
|
|
3692
3711
|
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3693
3712
|
}
|
|
3694
|
-
), /* @__PURE__ */
|
|
3713
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3695
3714
|
TextInput,
|
|
3696
3715
|
{
|
|
3697
3716
|
label: "Title",
|
|
3698
3717
|
defaultValue: title,
|
|
3699
3718
|
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3700
3719
|
}
|
|
3701
|
-
), /* @__PURE__ */
|
|
3720
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3702
3721
|
TextInput,
|
|
3703
3722
|
{
|
|
3704
3723
|
label: "Company",
|
|
3705
3724
|
defaultValue: company,
|
|
3706
3725
|
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3707
3726
|
}
|
|
3708
|
-
), /* @__PURE__ */
|
|
3727
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3709
3728
|
TextInput,
|
|
3710
3729
|
{
|
|
3711
3730
|
label: "Address",
|
|
3712
3731
|
defaultValue: address,
|
|
3713
3732
|
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3714
3733
|
}
|
|
3715
|
-
), /* @__PURE__ */
|
|
3734
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3716
3735
|
TextInput,
|
|
3717
3736
|
{
|
|
3718
3737
|
label: "Email",
|
|
3719
3738
|
defaultValue: email,
|
|
3720
3739
|
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3721
3740
|
}
|
|
3722
|
-
), /* @__PURE__ */
|
|
3741
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3723
3742
|
TextInput,
|
|
3724
3743
|
{
|
|
3725
3744
|
label: "Phone",
|
|
3726
3745
|
defaultValue: phone,
|
|
3727
3746
|
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3728
3747
|
}
|
|
3729
|
-
), /* @__PURE__ */
|
|
3748
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3730
3749
|
TextInput,
|
|
3731
3750
|
{
|
|
3732
3751
|
label: "Website",
|
|
3733
3752
|
defaultValue: website,
|
|
3734
3753
|
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3735
3754
|
}
|
|
3736
|
-
), /* @__PURE__ */
|
|
3755
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3737
3756
|
TextInput,
|
|
3738
3757
|
{
|
|
3739
3758
|
label: "Image URL",
|
|
3740
3759
|
defaultValue: imageUrl,
|
|
3741
3760
|
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3742
3761
|
}
|
|
3743
|
-
), /* @__PURE__ */
|
|
3762
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3744
3763
|
SliderInput,
|
|
3745
3764
|
{
|
|
3746
3765
|
label: "Image size",
|
|
3747
|
-
iconLabel: /* @__PURE__ */
|
|
3766
|
+
iconLabel: /* @__PURE__ */ React57.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3748
3767
|
units: "px",
|
|
3749
3768
|
step: 4,
|
|
3750
3769
|
min: 32,
|
|
@@ -3752,47 +3771,47 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3752
3771
|
defaultValue: imageSize,
|
|
3753
3772
|
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3754
3773
|
}
|
|
3755
|
-
), /* @__PURE__ */
|
|
3774
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3756
3775
|
RadioGroupInput,
|
|
3757
3776
|
{
|
|
3758
3777
|
label: "Image shape",
|
|
3759
3778
|
defaultValue: imageShape,
|
|
3760
3779
|
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3761
3780
|
},
|
|
3762
|
-
/* @__PURE__ */
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
3765
|
-
), /* @__PURE__ */
|
|
3781
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "circle" }, "Circle"),
|
|
3782
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "square" }, "Square"),
|
|
3783
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "rounded" }, "Rounded")
|
|
3784
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3766
3785
|
RadioGroupInput,
|
|
3767
3786
|
{
|
|
3768
3787
|
label: "Layout",
|
|
3769
3788
|
defaultValue: layout,
|
|
3770
3789
|
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3771
3790
|
},
|
|
3772
|
-
/* @__PURE__ */
|
|
3773
|
-
/* @__PURE__ */
|
|
3774
|
-
), /* @__PURE__ */
|
|
3791
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
|
|
3792
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "vertical" }, "Vertical")
|
|
3793
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3775
3794
|
ColorInput2,
|
|
3776
3795
|
{
|
|
3777
3796
|
label: "Name color",
|
|
3778
3797
|
defaultValue: nameColor,
|
|
3779
3798
|
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3780
3799
|
}
|
|
3781
|
-
), /* @__PURE__ */
|
|
3800
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3782
3801
|
ColorInput2,
|
|
3783
3802
|
{
|
|
3784
3803
|
label: "Text color",
|
|
3785
3804
|
defaultValue: textColor,
|
|
3786
3805
|
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3787
3806
|
}
|
|
3788
|
-
), /* @__PURE__ */
|
|
3807
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3789
3808
|
ColorInput2,
|
|
3790
3809
|
{
|
|
3791
3810
|
label: "Link color",
|
|
3792
3811
|
defaultValue: linkColor,
|
|
3793
3812
|
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3794
3813
|
}
|
|
3795
|
-
), /* @__PURE__ */
|
|
3814
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3796
3815
|
MultiStylePropertyPanel,
|
|
3797
3816
|
{
|
|
3798
3817
|
names: ["backgroundColor", "fontFamily", "padding"],
|
|
@@ -3813,11 +3832,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3813
3832
|
setErrors(res.error);
|
|
3814
3833
|
}
|
|
3815
3834
|
};
|
|
3816
|
-
return /* @__PURE__ */
|
|
3835
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React57.createElement(
|
|
3817
3836
|
SliderInput,
|
|
3818
3837
|
{
|
|
3819
3838
|
label: "Height",
|
|
3820
|
-
iconLabel: /* @__PURE__ */
|
|
3839
|
+
iconLabel: /* @__PURE__ */ React57.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3821
3840
|
units: "px",
|
|
3822
3841
|
step: 4,
|
|
3823
3842
|
min: 4,
|
|
@@ -3839,7 +3858,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3839
3858
|
setErrors(res.error);
|
|
3840
3859
|
}
|
|
3841
3860
|
};
|
|
3842
|
-
return /* @__PURE__ */
|
|
3861
|
+
return /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React57.createElement(
|
|
3843
3862
|
TextInput,
|
|
3844
3863
|
{
|
|
3845
3864
|
label: "Content",
|
|
@@ -3847,14 +3866,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3847
3866
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3848
3867
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3849
3868
|
}
|
|
3850
|
-
), /* @__PURE__ */
|
|
3869
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3851
3870
|
BooleanInput,
|
|
3852
3871
|
{
|
|
3853
3872
|
label: "Markdown",
|
|
3854
3873
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3855
3874
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3856
3875
|
}
|
|
3857
|
-
), /* @__PURE__ */
|
|
3876
|
+
), /* @__PURE__ */ React57.createElement(
|
|
3858
3877
|
MultiStylePropertyPanel,
|
|
3859
3878
|
{
|
|
3860
3879
|
names: [
|
|
@@ -3876,7 +3895,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3876
3895
|
|
|
3877
3896
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
3878
3897
|
function renderMessage(val) {
|
|
3879
|
-
return /* @__PURE__ */
|
|
3898
|
+
return /* @__PURE__ */ React57.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React57.createElement(Typography, { color: "text.secondary" }, val));
|
|
3880
3899
|
}
|
|
3881
3900
|
function ConfigurationPanel() {
|
|
3882
3901
|
const document2 = useDocument();
|
|
@@ -3892,55 +3911,55 @@ function ConfigurationPanel() {
|
|
|
3892
3911
|
const { data, type } = block;
|
|
3893
3912
|
switch (type) {
|
|
3894
3913
|
case "Avatar":
|
|
3895
|
-
return /* @__PURE__ */
|
|
3914
|
+
return /* @__PURE__ */ React57.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3896
3915
|
case "Button":
|
|
3897
|
-
return /* @__PURE__ */
|
|
3916
|
+
return /* @__PURE__ */ React57.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3898
3917
|
case "ColumnsContainer":
|
|
3899
|
-
return /* @__PURE__ */
|
|
3918
|
+
return /* @__PURE__ */ React57.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3900
3919
|
case "Container":
|
|
3901
|
-
return /* @__PURE__ */
|
|
3920
|
+
return /* @__PURE__ */ React57.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3902
3921
|
case "Divider":
|
|
3903
|
-
return /* @__PURE__ */
|
|
3922
|
+
return /* @__PURE__ */ React57.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3904
3923
|
case "Heading":
|
|
3905
|
-
return /* @__PURE__ */
|
|
3924
|
+
return /* @__PURE__ */ React57.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3906
3925
|
case "Html":
|
|
3907
|
-
return /* @__PURE__ */
|
|
3926
|
+
return /* @__PURE__ */ React57.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3908
3927
|
case "Image":
|
|
3909
|
-
return /* @__PURE__ */
|
|
3928
|
+
return /* @__PURE__ */ React57.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3910
3929
|
case "EmailLayout":
|
|
3911
|
-
return /* @__PURE__ */
|
|
3930
|
+
return /* @__PURE__ */ React57.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3912
3931
|
case "Spacer":
|
|
3913
|
-
return /* @__PURE__ */
|
|
3932
|
+
return /* @__PURE__ */ React57.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3914
3933
|
case "Signature":
|
|
3915
|
-
return /* @__PURE__ */
|
|
3934
|
+
return /* @__PURE__ */ React57.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3916
3935
|
case "Text":
|
|
3917
|
-
return /* @__PURE__ */
|
|
3936
|
+
return /* @__PURE__ */ React57.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3918
3937
|
default:
|
|
3919
|
-
return /* @__PURE__ */
|
|
3938
|
+
return /* @__PURE__ */ React57.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
3920
3939
|
}
|
|
3921
3940
|
}
|
|
3922
3941
|
function StylesPanel() {
|
|
3923
3942
|
const block = useDocument().root;
|
|
3924
3943
|
if (!block) {
|
|
3925
|
-
return /* @__PURE__ */
|
|
3944
|
+
return /* @__PURE__ */ React57.createElement("p", null, "Block not found");
|
|
3926
3945
|
}
|
|
3927
3946
|
const { data, type } = block;
|
|
3928
3947
|
if (type !== "EmailLayout") {
|
|
3929
3948
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3930
3949
|
}
|
|
3931
|
-
return /* @__PURE__ */
|
|
3950
|
+
return /* @__PURE__ */ React57.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3932
3951
|
}
|
|
3933
3952
|
function TemplateDownloadButton() {
|
|
3934
3953
|
const doc = useDocument();
|
|
3935
3954
|
const href = useMemo(() => {
|
|
3936
3955
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3937
3956
|
}, [doc]);
|
|
3938
|
-
return /* @__PURE__ */
|
|
3957
|
+
return /* @__PURE__ */ React57.createElement(
|
|
3939
3958
|
Button$1,
|
|
3940
3959
|
{
|
|
3941
3960
|
variant: "outlined",
|
|
3942
3961
|
color: "primary",
|
|
3943
|
-
startIcon: /* @__PURE__ */
|
|
3962
|
+
startIcon: /* @__PURE__ */ React57.createElement(FileDownloadOutlined, null),
|
|
3944
3963
|
href,
|
|
3945
3964
|
download: "emailTemplate.json",
|
|
3946
3965
|
fullWidth: true
|
|
@@ -3950,8 +3969,18 @@ function TemplateDownloadButton() {
|
|
|
3950
3969
|
}
|
|
3951
3970
|
|
|
3952
3971
|
// src/app/inspector-drawer/template-panel.tsx
|
|
3953
|
-
function TemplatePanel({
|
|
3954
|
-
|
|
3972
|
+
function TemplatePanel({
|
|
3973
|
+
deleteTemplate,
|
|
3974
|
+
copyTemplate,
|
|
3975
|
+
renameTemplate
|
|
3976
|
+
}) {
|
|
3977
|
+
const {
|
|
3978
|
+
currentTemplateId,
|
|
3979
|
+
currentTemplateName,
|
|
3980
|
+
currentTemplateTags,
|
|
3981
|
+
setCurrentTemplate,
|
|
3982
|
+
setCurrentTemplateTags
|
|
3983
|
+
} = useEmailEditor();
|
|
3955
3984
|
const document2 = useDocument();
|
|
3956
3985
|
const persistenceEnabled = usePersistenceEnabled();
|
|
3957
3986
|
const workspaceBackground = useWorkspaceBackground();
|
|
@@ -3972,7 +4001,7 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3972
4001
|
window.alert("Template copied successfully!");
|
|
3973
4002
|
}
|
|
3974
4003
|
};
|
|
3975
|
-
const workspaceToggle = /* @__PURE__ */
|
|
4004
|
+
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
4005
|
ToggleButtonGroup,
|
|
3977
4006
|
{
|
|
3978
4007
|
value: workspaceBackground,
|
|
@@ -3980,13 +4009,27 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3980
4009
|
size: "small",
|
|
3981
4010
|
onChange: (_, v) => v && setWorkspaceBackground(v)
|
|
3982
4011
|
},
|
|
3983
|
-
/* @__PURE__ */
|
|
3984
|
-
/* @__PURE__ */
|
|
3985
|
-
), /* @__PURE__ */
|
|
4012
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "checkerboard", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React57.createElement(GridOnOutlined, { fontSize: "small" }), "Checkerboard"),
|
|
4013
|
+
/* @__PURE__ */ React57.createElement(ToggleButton, { value: "solid", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React57.createElement(SquareOutlined, { fontSize: "small" }), "Solid")
|
|
4014
|
+
), /* @__PURE__ */ React57.createElement(Typography, { variant: "caption", sx: { color: "text.disabled" } }, "Editor-only \u2014 never reaches the rendered email.")));
|
|
3986
4015
|
if (!currentTemplateId) {
|
|
3987
|
-
return /* @__PURE__ */
|
|
4016
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected"), workspaceToggle);
|
|
3988
4017
|
}
|
|
3989
|
-
return /* @__PURE__ */
|
|
4018
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Details" }, /* @__PURE__ */ React57.createElement(
|
|
4019
|
+
DetailsEditor,
|
|
4020
|
+
{
|
|
4021
|
+
templateId: currentTemplateId,
|
|
4022
|
+
currentName: currentTemplateName != null ? currentTemplateName : "",
|
|
4023
|
+
currentTags: currentTemplateTags,
|
|
4024
|
+
canEdit: Boolean(renameTemplate),
|
|
4025
|
+
onSave: (name, tags) => __async(null, null, function* () {
|
|
4026
|
+
if (!renameTemplate) return;
|
|
4027
|
+
yield renameTemplate(currentTemplateId, name, { tags });
|
|
4028
|
+
setCurrentTemplate(currentTemplateId, name);
|
|
4029
|
+
setCurrentTemplateTags(tags);
|
|
4030
|
+
})
|
|
4031
|
+
}
|
|
4032
|
+
)), /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React57.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React57.createElement(
|
|
3990
4033
|
Typography,
|
|
3991
4034
|
{
|
|
3992
4035
|
variant: "body2",
|
|
@@ -3999,29 +4042,127 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3999
4042
|
}
|
|
4000
4043
|
},
|
|
4001
4044
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
4002
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
4045
|
+
), persistenceEnabled && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
4003
4046
|
Button$1,
|
|
4004
4047
|
{
|
|
4005
4048
|
variant: "outlined",
|
|
4006
4049
|
color: "primary",
|
|
4007
|
-
startIcon: /* @__PURE__ */
|
|
4050
|
+
startIcon: /* @__PURE__ */ React57.createElement(ContentCopyOutlined, null),
|
|
4008
4051
|
onClick: handleCopyToSamples,
|
|
4009
4052
|
fullWidth: true,
|
|
4010
4053
|
disabled: !copyTemplate
|
|
4011
4054
|
},
|
|
4012
4055
|
"Save as Sample Template"
|
|
4013
|
-
), /* @__PURE__ */
|
|
4056
|
+
), /* @__PURE__ */ React57.createElement(
|
|
4014
4057
|
Button$1,
|
|
4015
4058
|
{
|
|
4016
4059
|
variant: "outlined",
|
|
4017
4060
|
color: "error",
|
|
4018
|
-
startIcon: /* @__PURE__ */
|
|
4061
|
+
startIcon: /* @__PURE__ */ React57.createElement(DeleteOutlined, null),
|
|
4019
4062
|
onClick: handleDelete,
|
|
4020
4063
|
fullWidth: true,
|
|
4021
4064
|
disabled: !deleteTemplate
|
|
4022
4065
|
},
|
|
4023
4066
|
"Delete Template"
|
|
4024
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
4067
|
+
)))), persistenceEnabled && /* @__PURE__ */ React57.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React57.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React57.createElement(TemplateDownloadButton, null))), workspaceToggle);
|
|
4068
|
+
}
|
|
4069
|
+
function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }) {
|
|
4070
|
+
const [name, setName] = useState(currentName);
|
|
4071
|
+
const [tags, setTags] = useState(currentTags);
|
|
4072
|
+
const [tagInput, setTagInput] = useState("");
|
|
4073
|
+
const [saving, setSaving] = useState(false);
|
|
4074
|
+
const [justSaved, setJustSaved] = useState(false);
|
|
4075
|
+
useEffect(() => {
|
|
4076
|
+
setName(currentName);
|
|
4077
|
+
}, [templateId, currentName]);
|
|
4078
|
+
useEffect(() => {
|
|
4079
|
+
setTags(currentTags);
|
|
4080
|
+
}, [templateId, currentTags.join("")]);
|
|
4081
|
+
const addTag = () => {
|
|
4082
|
+
const trimmed = tagInput.trim();
|
|
4083
|
+
if (!trimmed) return;
|
|
4084
|
+
if (tags.some((t) => t.toLowerCase() === trimmed.toLowerCase())) {
|
|
4085
|
+
setTagInput("");
|
|
4086
|
+
return;
|
|
4087
|
+
}
|
|
4088
|
+
setTags([...tags, trimmed]);
|
|
4089
|
+
setTagInput("");
|
|
4090
|
+
};
|
|
4091
|
+
const removeTag = (tag) => setTags(tags.filter((t) => t !== tag));
|
|
4092
|
+
const dirty = name !== currentName || tags.length !== currentTags.length || tags.some((t, i) => t !== currentTags[i]);
|
|
4093
|
+
const handleSave = () => __async(null, null, function* () {
|
|
4094
|
+
if (!canEdit || !dirty || !name.trim()) return;
|
|
4095
|
+
setSaving(true);
|
|
4096
|
+
try {
|
|
4097
|
+
yield onSave(name.trim(), tags);
|
|
4098
|
+
setJustSaved(true);
|
|
4099
|
+
window.setTimeout(() => setJustSaved(false), 1600);
|
|
4100
|
+
} finally {
|
|
4101
|
+
setSaving(false);
|
|
4102
|
+
}
|
|
4103
|
+
});
|
|
4104
|
+
return /* @__PURE__ */ React57.createElement(Stack, { spacing: 1.5 }, /* @__PURE__ */ React57.createElement(
|
|
4105
|
+
TextField,
|
|
4106
|
+
{
|
|
4107
|
+
size: "small",
|
|
4108
|
+
label: "Name",
|
|
4109
|
+
value: name,
|
|
4110
|
+
onChange: (e) => setName(e.target.value),
|
|
4111
|
+
disabled: !canEdit || saving,
|
|
4112
|
+
fullWidth: true
|
|
4113
|
+
}
|
|
4114
|
+
), /* @__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(
|
|
4115
|
+
Chip,
|
|
4116
|
+
{
|
|
4117
|
+
key: tag,
|
|
4118
|
+
label: tag,
|
|
4119
|
+
size: "small",
|
|
4120
|
+
onDelete: canEdit && !saving ? () => removeTag(tag) : void 0
|
|
4121
|
+
}
|
|
4122
|
+
))) : /* @__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(
|
|
4123
|
+
TextField,
|
|
4124
|
+
{
|
|
4125
|
+
size: "small",
|
|
4126
|
+
fullWidth: true,
|
|
4127
|
+
placeholder: "Add a tag",
|
|
4128
|
+
value: tagInput,
|
|
4129
|
+
onChange: (e) => setTagInput(e.target.value),
|
|
4130
|
+
disabled: !canEdit || saving,
|
|
4131
|
+
onKeyDown: (e) => {
|
|
4132
|
+
if (e.key === "Enter" || e.key === ",") {
|
|
4133
|
+
e.preventDefault();
|
|
4134
|
+
addTag();
|
|
4135
|
+
} else if (e.key === "Backspace" && !tagInput && tags.length > 0) {
|
|
4136
|
+
e.preventDefault();
|
|
4137
|
+
removeTag(tags[tags.length - 1]);
|
|
4138
|
+
}
|
|
4139
|
+
},
|
|
4140
|
+
InputProps: {
|
|
4141
|
+
endAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React57.createElement(
|
|
4142
|
+
Button$1,
|
|
4143
|
+
{
|
|
4144
|
+
size: "small",
|
|
4145
|
+
onClick: addTag,
|
|
4146
|
+
disabled: !canEdit || saving || !tagInput.trim(),
|
|
4147
|
+
startIcon: /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" }),
|
|
4148
|
+
sx: { textTransform: "none" }
|
|
4149
|
+
},
|
|
4150
|
+
"Add"
|
|
4151
|
+
))
|
|
4152
|
+
}
|
|
4153
|
+
}
|
|
4154
|
+
)), /* @__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(
|
|
4155
|
+
Button$1,
|
|
4156
|
+
{
|
|
4157
|
+
variant: "contained",
|
|
4158
|
+
size: "small",
|
|
4159
|
+
fullWidth: true,
|
|
4160
|
+
onClick: handleSave,
|
|
4161
|
+
disabled: !canEdit || saving || !dirty || !name.trim(),
|
|
4162
|
+
startIcon: justSaved ? /* @__PURE__ */ React57.createElement(CheckOutlined, { fontSize: "small" }) : null
|
|
4163
|
+
},
|
|
4164
|
+
saving ? "Saving\u2026" : justSaved ? "Saved" : "Save details"
|
|
4165
|
+
))));
|
|
4025
4166
|
}
|
|
4026
4167
|
|
|
4027
4168
|
// src/app/variables/variable-utils.ts
|
|
@@ -4195,7 +4336,7 @@ function VariablesPanel() {
|
|
|
4195
4336
|
const lastFocused = useLastFocusedEditable();
|
|
4196
4337
|
const root = document2.root;
|
|
4197
4338
|
if (!root || root.type !== "EmailLayout") {
|
|
4198
|
-
return /* @__PURE__ */
|
|
4339
|
+
return /* @__PURE__ */ React57.createElement(Box, { p: 2 }, /* @__PURE__ */ React57.createElement(Alert, { severity: "info" }, "Open a template to manage variables."));
|
|
4199
4340
|
}
|
|
4200
4341
|
const data = root.data;
|
|
4201
4342
|
const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
|
|
@@ -4290,7 +4431,7 @@ function VariablesPanel() {
|
|
|
4290
4431
|
} catch (e) {
|
|
4291
4432
|
}
|
|
4292
4433
|
});
|
|
4293
|
-
return /* @__PURE__ */
|
|
4434
|
+
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
4435
|
Chip,
|
|
4295
4436
|
{
|
|
4296
4437
|
key: name,
|
|
@@ -4298,12 +4439,12 @@ function VariablesPanel() {
|
|
|
4298
4439
|
label: name,
|
|
4299
4440
|
onClick: () => addFromToken(name),
|
|
4300
4441
|
onDelete: () => addFromToken(name),
|
|
4301
|
-
deleteIcon: /* @__PURE__ */
|
|
4442
|
+
deleteIcon: /* @__PURE__ */ React57.createElement(AddOutlined, null),
|
|
4302
4443
|
sx: { fontFamily: "monospace" }
|
|
4303
4444
|
}
|
|
4304
|
-
))), /* @__PURE__ */
|
|
4445
|
+
))), /* @__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
4446
|
var _a2;
|
|
4306
|
-
return /* @__PURE__ */
|
|
4447
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4307
4448
|
VariableRow,
|
|
4308
4449
|
{
|
|
4309
4450
|
key: i,
|
|
@@ -4354,7 +4495,7 @@ function VariableRow({
|
|
|
4354
4495
|
onCommitRename(draftName.trim());
|
|
4355
4496
|
}
|
|
4356
4497
|
};
|
|
4357
|
-
return /* @__PURE__ */
|
|
4498
|
+
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
4499
|
TextField,
|
|
4359
4500
|
{
|
|
4360
4501
|
label: "Name",
|
|
@@ -4379,7 +4520,7 @@ function VariableRow({
|
|
|
4379
4520
|
error: Boolean(nameError),
|
|
4380
4521
|
helperText: nameError != null ? nameError : " "
|
|
4381
4522
|
}
|
|
4382
|
-
), /* @__PURE__ */
|
|
4523
|
+
), /* @__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
4524
|
IconButton,
|
|
4384
4525
|
{
|
|
4385
4526
|
size: "small",
|
|
@@ -4387,8 +4528,8 @@ function VariableRow({
|
|
|
4387
4528
|
disabled: !hasName,
|
|
4388
4529
|
"aria-label": `Copy ${variable.name || "variable"} token`
|
|
4389
4530
|
},
|
|
4390
|
-
/* @__PURE__ */
|
|
4391
|
-
))), /* @__PURE__ */
|
|
4531
|
+
/* @__PURE__ */ React57.createElement(ContentCopyOutlined, { fontSize: "small" })
|
|
4532
|
+
))), /* @__PURE__ */ React57.createElement(Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
4392
4533
|
IconButton,
|
|
4393
4534
|
{
|
|
4394
4535
|
size: "small",
|
|
@@ -4396,16 +4537,16 @@ function VariableRow({
|
|
|
4396
4537
|
disabled: !hasName || !canInsert,
|
|
4397
4538
|
"aria-label": `Insert ${variable.name || "variable"} at cursor`
|
|
4398
4539
|
},
|
|
4399
|
-
/* @__PURE__ */
|
|
4400
|
-
))), /* @__PURE__ */
|
|
4540
|
+
/* @__PURE__ */ React57.createElement(InputOutlined, { fontSize: "small" })
|
|
4541
|
+
))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Remove" }, /* @__PURE__ */ React57.createElement(
|
|
4401
4542
|
IconButton,
|
|
4402
4543
|
{
|
|
4403
4544
|
size: "small",
|
|
4404
4545
|
onClick: onRemove,
|
|
4405
4546
|
"aria-label": `Remove ${variable.name || "variable"}`
|
|
4406
4547
|
},
|
|
4407
|
-
/* @__PURE__ */
|
|
4408
|
-
)))), /* @__PURE__ */
|
|
4548
|
+
/* @__PURE__ */ React57.createElement(DeleteOutline, { fontSize: "small" })
|
|
4549
|
+
)))), /* @__PURE__ */ React57.createElement(
|
|
4409
4550
|
TextField,
|
|
4410
4551
|
{
|
|
4411
4552
|
label: "Description",
|
|
@@ -4415,7 +4556,7 @@ function VariableRow({
|
|
|
4415
4556
|
onChange: (e) => onChangeDescription(e.target.value),
|
|
4416
4557
|
placeholder: "Optional"
|
|
4417
4558
|
}
|
|
4418
|
-
), /* @__PURE__ */
|
|
4559
|
+
), /* @__PURE__ */ React57.createElement(
|
|
4419
4560
|
TextField,
|
|
4420
4561
|
{
|
|
4421
4562
|
label: "Sample value",
|
|
@@ -4425,7 +4566,7 @@ function VariableRow({
|
|
|
4425
4566
|
onChange: (e) => onChangeSampleValue(e.target.value),
|
|
4426
4567
|
placeholder: "Shown in Preview mode",
|
|
4427
4568
|
InputProps: {
|
|
4428
|
-
startAdornment: /* @__PURE__ */
|
|
4569
|
+
startAdornment: /* @__PURE__ */ React57.createElement(
|
|
4429
4570
|
DataObjectOutlined,
|
|
4430
4571
|
{
|
|
4431
4572
|
fontSize: "small",
|
|
@@ -4434,7 +4575,7 @@ function VariableRow({
|
|
|
4434
4575
|
)
|
|
4435
4576
|
}
|
|
4436
4577
|
}
|
|
4437
|
-
), /* @__PURE__ */
|
|
4578
|
+
), /* @__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
4579
|
Chip,
|
|
4439
4580
|
{
|
|
4440
4581
|
size: "small",
|
|
@@ -4451,6 +4592,7 @@ function InspectorDrawer({
|
|
|
4451
4592
|
exitDuration = 225,
|
|
4452
4593
|
deleteTemplate,
|
|
4453
4594
|
copyTemplate,
|
|
4595
|
+
renameTemplate,
|
|
4454
4596
|
savingEnabled = true
|
|
4455
4597
|
} = {}) {
|
|
4456
4598
|
const selectedSidebarTab = useSelectedSidebarTab();
|
|
@@ -4458,22 +4600,23 @@ function InspectorDrawer({
|
|
|
4458
4600
|
const renderCurrentSidebarPanel = () => {
|
|
4459
4601
|
switch (selectedSidebarTab) {
|
|
4460
4602
|
case "block-configuration":
|
|
4461
|
-
return /* @__PURE__ */
|
|
4603
|
+
return /* @__PURE__ */ React57.createElement(ConfigurationPanel, null);
|
|
4462
4604
|
case "styles":
|
|
4463
|
-
return /* @__PURE__ */
|
|
4605
|
+
return /* @__PURE__ */ React57.createElement(StylesPanel, null);
|
|
4464
4606
|
case "variables":
|
|
4465
|
-
return /* @__PURE__ */
|
|
4607
|
+
return /* @__PURE__ */ React57.createElement(VariablesPanel, null);
|
|
4466
4608
|
case "template-settings":
|
|
4467
|
-
return /* @__PURE__ */
|
|
4609
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4468
4610
|
TemplatePanel,
|
|
4469
4611
|
{
|
|
4470
4612
|
deleteTemplate,
|
|
4471
|
-
copyTemplate
|
|
4613
|
+
copyTemplate,
|
|
4614
|
+
renameTemplate
|
|
4472
4615
|
}
|
|
4473
4616
|
);
|
|
4474
4617
|
}
|
|
4475
4618
|
};
|
|
4476
|
-
return /* @__PURE__ */
|
|
4619
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4477
4620
|
Drawer,
|
|
4478
4621
|
{
|
|
4479
4622
|
variant: "persistent",
|
|
@@ -4495,7 +4638,7 @@ function InspectorDrawer({
|
|
|
4495
4638
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
4496
4639
|
}
|
|
4497
4640
|
},
|
|
4498
|
-
/* @__PURE__ */
|
|
4641
|
+
/* @__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
4642
|
Tabs,
|
|
4500
4643
|
{
|
|
4501
4644
|
value: selectedSidebarTab,
|
|
@@ -4503,12 +4646,12 @@ function InspectorDrawer({
|
|
|
4503
4646
|
variant: "fullWidth",
|
|
4504
4647
|
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
4505
4648
|
},
|
|
4506
|
-
/* @__PURE__ */
|
|
4507
|
-
/* @__PURE__ */
|
|
4508
|
-
/* @__PURE__ */
|
|
4509
|
-
/* @__PURE__ */
|
|
4649
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "styles", label: "Styles" }),
|
|
4650
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "block-configuration", label: "Inspect" }),
|
|
4651
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "variables", label: "Variables" }),
|
|
4652
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "template-settings", label: "Settings" })
|
|
4510
4653
|
))),
|
|
4511
|
-
/* @__PURE__ */
|
|
4654
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
4512
4655
|
);
|
|
4513
4656
|
}
|
|
4514
4657
|
var SnackbarContext = createContext(null);
|
|
@@ -4529,7 +4672,7 @@ function SnackbarProvider({ children }) {
|
|
|
4529
4672
|
const handleClose = () => {
|
|
4530
4673
|
setMessage(null);
|
|
4531
4674
|
};
|
|
4532
|
-
return /* @__PURE__ */
|
|
4675
|
+
return /* @__PURE__ */ React57.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React57.createElement(
|
|
4533
4676
|
Snackbar,
|
|
4534
4677
|
{
|
|
4535
4678
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4588,11 +4731,12 @@ function TemplateRow({
|
|
|
4588
4731
|
fn == null ? void 0 : fn();
|
|
4589
4732
|
};
|
|
4590
4733
|
const handleClick = () => __async(null, null, function* () {
|
|
4734
|
+
var _a;
|
|
4591
4735
|
try {
|
|
4592
4736
|
const content = yield templateLoader();
|
|
4593
4737
|
if (content) {
|
|
4594
4738
|
resetDocument(content);
|
|
4595
|
-
setCurrentTemplate(template.id, template.slug, template.kind);
|
|
4739
|
+
setCurrentTemplate(template.id, template.slug, template.kind, (_a = template.tags) != null ? _a : []);
|
|
4596
4740
|
}
|
|
4597
4741
|
} catch (error) {
|
|
4598
4742
|
console.error("Error loading template:", error);
|
|
@@ -4605,7 +4749,7 @@ function TemplateRow({
|
|
|
4605
4749
|
const hasActions = Boolean(
|
|
4606
4750
|
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
4607
4751
|
);
|
|
4608
|
-
return /* @__PURE__ */
|
|
4752
|
+
return /* @__PURE__ */ React57.createElement(
|
|
4609
4753
|
Box,
|
|
4610
4754
|
{
|
|
4611
4755
|
role: "button",
|
|
@@ -4631,7 +4775,7 @@ function TemplateRow({
|
|
|
4631
4775
|
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
4632
4776
|
}
|
|
4633
4777
|
},
|
|
4634
|
-
/* @__PURE__ */
|
|
4778
|
+
/* @__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
4779
|
Typography,
|
|
4636
4780
|
{
|
|
4637
4781
|
variant: "body2",
|
|
@@ -4645,14 +4789,14 @@ function TemplateRow({
|
|
|
4645
4789
|
title: template.slug
|
|
4646
4790
|
},
|
|
4647
4791
|
template.slug
|
|
4648
|
-
), updated && !hasActions && /* @__PURE__ */
|
|
4792
|
+
), updated && !hasActions && /* @__PURE__ */ React57.createElement(
|
|
4649
4793
|
Typography,
|
|
4650
4794
|
{
|
|
4651
4795
|
variant: "caption",
|
|
4652
4796
|
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
4653
4797
|
},
|
|
4654
4798
|
updated
|
|
4655
|
-
)), template.description && /* @__PURE__ */
|
|
4799
|
+
)), template.description && /* @__PURE__ */ React57.createElement(
|
|
4656
4800
|
Typography,
|
|
4657
4801
|
{
|
|
4658
4802
|
variant: "caption",
|
|
@@ -4666,7 +4810,7 @@ function TemplateRow({
|
|
|
4666
4810
|
}
|
|
4667
4811
|
},
|
|
4668
4812
|
template.description
|
|
4669
|
-
), template.tags && template.tags.length > 0 && /* @__PURE__ */
|
|
4813
|
+
), 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
4814
|
Chip,
|
|
4671
4815
|
{
|
|
4672
4816
|
key: tag,
|
|
@@ -4675,7 +4819,7 @@ function TemplateRow({
|
|
|
4675
4819
|
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
4676
4820
|
}
|
|
4677
4821
|
))))),
|
|
4678
|
-
hasActions && /* @__PURE__ */
|
|
4822
|
+
hasActions && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(Tooltip, { title: "More" }, /* @__PURE__ */ React57.createElement(
|
|
4679
4823
|
IconButton,
|
|
4680
4824
|
{
|
|
4681
4825
|
size: "small",
|
|
@@ -4691,8 +4835,8 @@ function TemplateRow({
|
|
|
4691
4835
|
transition: "opacity 120ms"
|
|
4692
4836
|
}
|
|
4693
4837
|
},
|
|
4694
|
-
/* @__PURE__ */
|
|
4695
|
-
)), /* @__PURE__ */
|
|
4838
|
+
/* @__PURE__ */ React57.createElement(MoreVertOutlined, { fontSize: "small" })
|
|
4839
|
+
)), /* @__PURE__ */ React57.createElement(
|
|
4696
4840
|
Menu,
|
|
4697
4841
|
{
|
|
4698
4842
|
anchorEl: menuAnchor,
|
|
@@ -4703,14 +4847,14 @@ function TemplateRow({
|
|
|
4703
4847
|
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
4704
4848
|
slotProps: { paper: { sx: { minWidth: 200 } } }
|
|
4705
4849
|
},
|
|
4706
|
-
onRename && /* @__PURE__ */
|
|
4707
|
-
onDuplicate && /* @__PURE__ */
|
|
4708
|
-
onDuplicateAsTemplate && /* @__PURE__ */
|
|
4709
|
-
onPromote && /* @__PURE__ */
|
|
4710
|
-
onDemote && /* @__PURE__ */
|
|
4850
|
+
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")),
|
|
4851
|
+
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")),
|
|
4852
|
+
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")),
|
|
4853
|
+
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")),
|
|
4854
|
+
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
4855
|
onDelete && [
|
|
4712
|
-
/* @__PURE__ */
|
|
4713
|
-
/* @__PURE__ */
|
|
4856
|
+
/* @__PURE__ */ React57.createElement(Divider$1, { key: "divider" }),
|
|
4857
|
+
/* @__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
4858
|
]
|
|
4715
4859
|
))
|
|
4716
4860
|
);
|
|
@@ -4825,31 +4969,31 @@ var PREVIEW_MAX = 36;
|
|
|
4825
4969
|
function iconForType(type) {
|
|
4826
4970
|
switch (type) {
|
|
4827
4971
|
case "EmailLayout":
|
|
4828
|
-
return /* @__PURE__ */
|
|
4972
|
+
return /* @__PURE__ */ React57.createElement(DashboardOutlined, { fontSize: "small" });
|
|
4829
4973
|
case "Heading":
|
|
4830
|
-
return /* @__PURE__ */
|
|
4974
|
+
return /* @__PURE__ */ React57.createElement(HMobiledataOutlined, { fontSize: "small" });
|
|
4831
4975
|
case "Text":
|
|
4832
|
-
return /* @__PURE__ */
|
|
4976
|
+
return /* @__PURE__ */ React57.createElement(NotesOutlined, { fontSize: "small" });
|
|
4833
4977
|
case "Button":
|
|
4834
|
-
return /* @__PURE__ */
|
|
4978
|
+
return /* @__PURE__ */ React57.createElement(SmartButtonOutlined, { fontSize: "small" });
|
|
4835
4979
|
case "Image":
|
|
4836
|
-
return /* @__PURE__ */
|
|
4980
|
+
return /* @__PURE__ */ React57.createElement(ImageOutlined, { fontSize: "small" });
|
|
4837
4981
|
case "Avatar":
|
|
4838
|
-
return /* @__PURE__ */
|
|
4982
|
+
return /* @__PURE__ */ React57.createElement(AccountCircleOutlined, { fontSize: "small" });
|
|
4839
4983
|
case "Signature":
|
|
4840
|
-
return /* @__PURE__ */
|
|
4984
|
+
return /* @__PURE__ */ React57.createElement(ContactMailOutlined, { fontSize: "small" });
|
|
4841
4985
|
case "Divider":
|
|
4842
|
-
return /* @__PURE__ */
|
|
4986
|
+
return /* @__PURE__ */ React57.createElement(HorizontalRuleOutlined, { fontSize: "small" });
|
|
4843
4987
|
case "Spacer":
|
|
4844
|
-
return /* @__PURE__ */
|
|
4988
|
+
return /* @__PURE__ */ React57.createElement(Crop32Outlined, { fontSize: "small" });
|
|
4845
4989
|
case "Html":
|
|
4846
|
-
return /* @__PURE__ */
|
|
4990
|
+
return /* @__PURE__ */ React57.createElement(HtmlOutlined, { fontSize: "small" });
|
|
4847
4991
|
case "Container":
|
|
4848
|
-
return /* @__PURE__ */
|
|
4992
|
+
return /* @__PURE__ */ React57.createElement(LibraryAddOutlined, { fontSize: "small" });
|
|
4849
4993
|
case "ColumnsContainer":
|
|
4850
|
-
return /* @__PURE__ */
|
|
4994
|
+
return /* @__PURE__ */ React57.createElement(ViewColumnOutlined, { fontSize: "small" });
|
|
4851
4995
|
default:
|
|
4852
|
-
return /* @__PURE__ */
|
|
4996
|
+
return /* @__PURE__ */ React57.createElement(BusinessOutlined, { fontSize: "small" });
|
|
4853
4997
|
}
|
|
4854
4998
|
}
|
|
4855
4999
|
function previewText(text) {
|
|
@@ -4927,7 +5071,7 @@ function buildNode(id, doc, ctx) {
|
|
|
4927
5071
|
id: `${id}::col${colIdx}`,
|
|
4928
5072
|
label: `Column ${colIdx + 1}`,
|
|
4929
5073
|
preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
|
|
4930
|
-
icon: /* @__PURE__ */
|
|
5074
|
+
icon: /* @__PURE__ */ React57.createElement(ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
|
|
4931
5075
|
children: colChildren,
|
|
4932
5076
|
containerChildrenRef: parentForCol
|
|
4933
5077
|
});
|
|
@@ -4989,7 +5133,7 @@ function OutlinePanel() {
|
|
|
4989
5133
|
setSelectedBlockId(payload.sourceId);
|
|
4990
5134
|
}
|
|
4991
5135
|
};
|
|
4992
|
-
return /* @__PURE__ */
|
|
5136
|
+
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
5137
|
OutlineRow,
|
|
4994
5138
|
{
|
|
4995
5139
|
node: tree,
|
|
@@ -5000,7 +5144,7 @@ function OutlinePanel() {
|
|
|
5000
5144
|
setDragging,
|
|
5001
5145
|
performMove
|
|
5002
5146
|
}
|
|
5003
|
-
) : /* @__PURE__ */
|
|
5147
|
+
) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
|
|
5004
5148
|
}
|
|
5005
5149
|
function OutlineRow({
|
|
5006
5150
|
node,
|
|
@@ -5086,7 +5230,7 @@ function OutlineRow({
|
|
|
5086
5230
|
const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
|
|
5087
5231
|
if (patch) setDocument(patch);
|
|
5088
5232
|
};
|
|
5089
|
-
return /* @__PURE__ */
|
|
5233
|
+
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
5234
|
Stack,
|
|
5091
5235
|
{
|
|
5092
5236
|
direction: "row",
|
|
@@ -5119,7 +5263,7 @@ function OutlineRow({
|
|
|
5119
5263
|
userSelect: "none"
|
|
5120
5264
|
}
|
|
5121
5265
|
},
|
|
5122
|
-
hasChildren ? /* @__PURE__ */
|
|
5266
|
+
hasChildren ? /* @__PURE__ */ React57.createElement(
|
|
5123
5267
|
Box,
|
|
5124
5268
|
{
|
|
5125
5269
|
role: "button",
|
|
@@ -5130,9 +5274,9 @@ function OutlineRow({
|
|
|
5130
5274
|
},
|
|
5131
5275
|
sx: { display: "flex", alignItems: "center", cursor: "pointer" }
|
|
5132
5276
|
},
|
|
5133
|
-
expanded ? /* @__PURE__ */
|
|
5134
|
-
) : /* @__PURE__ */
|
|
5135
|
-
/* @__PURE__ */
|
|
5277
|
+
expanded ? /* @__PURE__ */ React57.createElement(ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React57.createElement(ChevronRight, { fontSize: "small" })
|
|
5278
|
+
) : /* @__PURE__ */ React57.createElement(Box, { sx: { width: 20 } }),
|
|
5279
|
+
/* @__PURE__ */ React57.createElement(
|
|
5136
5280
|
Box,
|
|
5137
5281
|
{
|
|
5138
5282
|
sx: {
|
|
@@ -5144,7 +5288,7 @@ function OutlineRow({
|
|
|
5144
5288
|
},
|
|
5145
5289
|
node.icon
|
|
5146
5290
|
),
|
|
5147
|
-
/* @__PURE__ */
|
|
5291
|
+
/* @__PURE__ */ React57.createElement(
|
|
5148
5292
|
Typography,
|
|
5149
5293
|
{
|
|
5150
5294
|
variant: "body2",
|
|
@@ -5156,7 +5300,7 @@ function OutlineRow({
|
|
|
5156
5300
|
},
|
|
5157
5301
|
node.label
|
|
5158
5302
|
),
|
|
5159
|
-
node.preview && /* @__PURE__ */
|
|
5303
|
+
node.preview && /* @__PURE__ */ React57.createElement(
|
|
5160
5304
|
Typography,
|
|
5161
5305
|
{
|
|
5162
5306
|
variant: "body2",
|
|
@@ -5172,7 +5316,7 @@ function OutlineRow({
|
|
|
5172
5316
|
"\u2014 ",
|
|
5173
5317
|
node.preview
|
|
5174
5318
|
),
|
|
5175
|
-
canMove && /* @__PURE__ */
|
|
5319
|
+
canMove && /* @__PURE__ */ React57.createElement(
|
|
5176
5320
|
Box,
|
|
5177
5321
|
{
|
|
5178
5322
|
className: "outline-move-btns",
|
|
@@ -5183,7 +5327,7 @@ function OutlineRow({
|
|
|
5183
5327
|
transition: "opacity 120ms"
|
|
5184
5328
|
}
|
|
5185
5329
|
},
|
|
5186
|
-
/* @__PURE__ */
|
|
5330
|
+
/* @__PURE__ */ React57.createElement(Tooltip, { title: "Move up" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
5187
5331
|
IconButton,
|
|
5188
5332
|
{
|
|
5189
5333
|
size: "small",
|
|
@@ -5195,9 +5339,9 @@ function OutlineRow({
|
|
|
5195
5339
|
"aria-label": `Move ${node.label} up`,
|
|
5196
5340
|
sx: { p: 0.25 }
|
|
5197
5341
|
},
|
|
5198
|
-
/* @__PURE__ */
|
|
5342
|
+
/* @__PURE__ */ React57.createElement(KeyboardArrowUp, { fontSize: "small" })
|
|
5199
5343
|
))),
|
|
5200
|
-
/* @__PURE__ */
|
|
5344
|
+
/* @__PURE__ */ React57.createElement(Tooltip, { title: "Move down" }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
|
|
5201
5345
|
IconButton,
|
|
5202
5346
|
{
|
|
5203
5347
|
size: "small",
|
|
@@ -5209,10 +5353,10 @@ function OutlineRow({
|
|
|
5209
5353
|
"aria-label": `Move ${node.label} down`,
|
|
5210
5354
|
sx: { p: 0.25 }
|
|
5211
5355
|
},
|
|
5212
|
-
/* @__PURE__ */
|
|
5356
|
+
/* @__PURE__ */ React57.createElement(KeyboardArrowDown, { fontSize: "small" })
|
|
5213
5357
|
)))
|
|
5214
5358
|
)
|
|
5215
|
-
), dropPos === "after" && /* @__PURE__ */
|
|
5359
|
+
), dropPos === "after" && /* @__PURE__ */ React57.createElement(DropLine, { depth })), hasChildren && expanded && /* @__PURE__ */ React57.createElement(Box, null, node.children.map((child) => /* @__PURE__ */ React57.createElement(
|
|
5216
5360
|
OutlineRow,
|
|
5217
5361
|
{
|
|
5218
5362
|
key: child.id,
|
|
@@ -5227,7 +5371,7 @@ function OutlineRow({
|
|
|
5227
5371
|
))));
|
|
5228
5372
|
}
|
|
5229
5373
|
function DropLine({ depth }) {
|
|
5230
|
-
return /* @__PURE__ */
|
|
5374
|
+
return /* @__PURE__ */ React57.createElement(
|
|
5231
5375
|
Box,
|
|
5232
5376
|
{
|
|
5233
5377
|
sx: {
|
|
@@ -5235,7 +5379,7 @@ function DropLine({ depth }) {
|
|
|
5235
5379
|
height: 0
|
|
5236
5380
|
}
|
|
5237
5381
|
},
|
|
5238
|
-
/* @__PURE__ */
|
|
5382
|
+
/* @__PURE__ */ React57.createElement(
|
|
5239
5383
|
Box,
|
|
5240
5384
|
{
|
|
5241
5385
|
sx: {
|
|
@@ -5296,7 +5440,7 @@ function NewTemplatePickerDialog({
|
|
|
5296
5440
|
}
|
|
5297
5441
|
});
|
|
5298
5442
|
const pickable = samples.filter((s) => s.id !== "empty-email");
|
|
5299
|
-
return /* @__PURE__ */
|
|
5443
|
+
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
5444
|
List,
|
|
5301
5445
|
{
|
|
5302
5446
|
dense: true,
|
|
@@ -5310,24 +5454,24 @@ function NewTemplatePickerDialog({
|
|
|
5310
5454
|
overflowY: "auto"
|
|
5311
5455
|
}
|
|
5312
5456
|
},
|
|
5313
|
-
/* @__PURE__ */
|
|
5457
|
+
/* @__PURE__ */ React57.createElement(
|
|
5314
5458
|
ListItemButton,
|
|
5315
5459
|
{
|
|
5316
5460
|
selected: selectedStarter === null,
|
|
5317
5461
|
onClick: () => setSelectedStarter(null)
|
|
5318
5462
|
},
|
|
5319
|
-
/* @__PURE__ */
|
|
5463
|
+
/* @__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
5464
|
),
|
|
5321
|
-
pickable.map((s) => /* @__PURE__ */
|
|
5465
|
+
pickable.map((s) => /* @__PURE__ */ React57.createElement(
|
|
5322
5466
|
ListItemButton,
|
|
5323
5467
|
{
|
|
5324
5468
|
key: s.id,
|
|
5325
5469
|
selected: selectedStarter === s.id,
|
|
5326
5470
|
onClick: () => setSelectedStarter(s.id)
|
|
5327
5471
|
},
|
|
5328
|
-
/* @__PURE__ */
|
|
5472
|
+
/* @__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
5473
|
))
|
|
5330
|
-
), /* @__PURE__ */
|
|
5474
|
+
), /* @__PURE__ */ React57.createElement(
|
|
5331
5475
|
TextField,
|
|
5332
5476
|
{
|
|
5333
5477
|
autoFocus: true,
|
|
@@ -5346,7 +5490,7 @@ function NewTemplatePickerDialog({
|
|
|
5346
5490
|
helperText: error != null ? error : " ",
|
|
5347
5491
|
disabled: busy
|
|
5348
5492
|
}
|
|
5349
|
-
)), /* @__PURE__ */
|
|
5493
|
+
)), /* @__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
5494
|
}
|
|
5351
5495
|
function RenameDialog({
|
|
5352
5496
|
open,
|
|
@@ -5408,7 +5552,7 @@ function RenameDialog({
|
|
|
5408
5552
|
setSubmitting(false);
|
|
5409
5553
|
}
|
|
5410
5554
|
});
|
|
5411
|
-
return /* @__PURE__ */
|
|
5555
|
+
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
5556
|
TextField,
|
|
5413
5557
|
{
|
|
5414
5558
|
autoFocus: true,
|
|
@@ -5428,7 +5572,7 @@ function RenameDialog({
|
|
|
5428
5572
|
if (e.key === "Enter" && !submitting) handleSubmit();
|
|
5429
5573
|
}
|
|
5430
5574
|
}
|
|
5431
|
-
), /* @__PURE__ */
|
|
5575
|
+
), /* @__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
5576
|
Chip,
|
|
5433
5577
|
{
|
|
5434
5578
|
key: tag,
|
|
@@ -5436,7 +5580,7 @@ function RenameDialog({
|
|
|
5436
5580
|
size: "small",
|
|
5437
5581
|
onDelete: submitting ? void 0 : () => removeTag(tag)
|
|
5438
5582
|
}
|
|
5439
|
-
))) : /* @__PURE__ */
|
|
5583
|
+
))) : /* @__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
5584
|
TextField,
|
|
5441
5585
|
{
|
|
5442
5586
|
size: "small",
|
|
@@ -5455,20 +5599,20 @@ function RenameDialog({
|
|
|
5455
5599
|
}
|
|
5456
5600
|
},
|
|
5457
5601
|
InputProps: {
|
|
5458
|
-
endAdornment: /* @__PURE__ */
|
|
5602
|
+
endAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React57.createElement(
|
|
5459
5603
|
Button$1,
|
|
5460
5604
|
{
|
|
5461
5605
|
size: "small",
|
|
5462
5606
|
onClick: addTag,
|
|
5463
5607
|
disabled: !tagInput.trim() || submitting,
|
|
5464
|
-
startIcon: /* @__PURE__ */
|
|
5608
|
+
startIcon: /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" }),
|
|
5465
5609
|
sx: { textTransform: "none" }
|
|
5466
5610
|
},
|
|
5467
5611
|
"Add"
|
|
5468
5612
|
))
|
|
5469
5613
|
}
|
|
5470
5614
|
}
|
|
5471
|
-
), /* @__PURE__ */
|
|
5615
|
+
), /* @__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
5616
|
Button$1,
|
|
5473
5617
|
{
|
|
5474
5618
|
onClick: handleSubmit,
|
|
@@ -5537,7 +5681,7 @@ function SaveTemplateDialog({
|
|
|
5537
5681
|
setInternalError("");
|
|
5538
5682
|
onClose();
|
|
5539
5683
|
};
|
|
5540
|
-
return /* @__PURE__ */
|
|
5684
|
+
return /* @__PURE__ */ React57.createElement(
|
|
5541
5685
|
Dialog,
|
|
5542
5686
|
{
|
|
5543
5687
|
open,
|
|
@@ -5545,8 +5689,8 @@ function SaveTemplateDialog({
|
|
|
5545
5689
|
maxWidth: "sm",
|
|
5546
5690
|
fullWidth: true
|
|
5547
5691
|
},
|
|
5548
|
-
/* @__PURE__ */
|
|
5549
|
-
/* @__PURE__ */
|
|
5692
|
+
/* @__PURE__ */ React57.createElement(DialogTitle, null, "Save Email Template"),
|
|
5693
|
+
/* @__PURE__ */ React57.createElement(DialogContent, null, /* @__PURE__ */ React57.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React57.createElement(
|
|
5550
5694
|
TextField,
|
|
5551
5695
|
{
|
|
5552
5696
|
autoFocus: true,
|
|
@@ -5568,7 +5712,7 @@ function SaveTemplateDialog({
|
|
|
5568
5712
|
disabled: isSubmitting
|
|
5569
5713
|
}
|
|
5570
5714
|
))),
|
|
5571
|
-
/* @__PURE__ */
|
|
5715
|
+
/* @__PURE__ */ React57.createElement(DialogActions, null, /* @__PURE__ */ React57.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React57.createElement(
|
|
5572
5716
|
Button$1,
|
|
5573
5717
|
{
|
|
5574
5718
|
onClick: handleSave,
|
|
@@ -5774,16 +5918,15 @@ function SamplesDrawer({
|
|
|
5774
5918
|
showMessage("Template deleted");
|
|
5775
5919
|
};
|
|
5776
5920
|
const handleRenameSubmit = (newSlug, opts) => __async(null, null, function* () {
|
|
5921
|
+
var _a2, _b2;
|
|
5777
5922
|
if (!renameTarget || !renameTemplate) return;
|
|
5778
5923
|
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
|
-
};
|
|
5924
|
+
const newTags = (_b2 = (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : renameTarget.tags) != null ? _b2 : [];
|
|
5925
|
+
const patch = (t) => t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: newTags }) : t;
|
|
5783
5926
|
setTemplates((prev) => prev.map(patch));
|
|
5784
5927
|
setSamples((prev) => prev.map(patch));
|
|
5785
5928
|
if (currentTemplateId === renameTarget.id) {
|
|
5786
|
-
setCurrentTemplate(renameTarget.id, newSlug);
|
|
5929
|
+
setCurrentTemplate(renameTarget.id, newSlug, void 0, newTags);
|
|
5787
5930
|
}
|
|
5788
5931
|
showMessage("Details saved");
|
|
5789
5932
|
});
|
|
@@ -5890,7 +6033,7 @@ function SamplesDrawer({
|
|
|
5890
6033
|
return null;
|
|
5891
6034
|
}
|
|
5892
6035
|
const existingSlugs = templates.map((t) => t.slug);
|
|
5893
|
-
return /* @__PURE__ */
|
|
6036
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
5894
6037
|
Drawer,
|
|
5895
6038
|
{
|
|
5896
6039
|
variant: "persistent",
|
|
@@ -5905,7 +6048,7 @@ function SamplesDrawer({
|
|
|
5905
6048
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
5906
6049
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
5907
6050
|
},
|
|
5908
|
-
/* @__PURE__ */
|
|
6051
|
+
/* @__PURE__ */ React57.createElement(
|
|
5909
6052
|
Stack,
|
|
5910
6053
|
{
|
|
5911
6054
|
py: 1,
|
|
@@ -5915,16 +6058,16 @@ function SamplesDrawer({
|
|
|
5915
6058
|
spacing: 1.5,
|
|
5916
6059
|
sx: { overflowY: "auto" }
|
|
5917
6060
|
},
|
|
5918
|
-
/* @__PURE__ */
|
|
6061
|
+
/* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React57.createElement(Typography, { variant: "h6", component: "h1" }, "Library"), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React57.createElement(Tooltip, { title: activeLeftTab === "samples" ? "New sample" : "New template" }, /* @__PURE__ */ React57.createElement(
|
|
5919
6062
|
IconButton,
|
|
5920
6063
|
{
|
|
5921
6064
|
size: "small",
|
|
5922
6065
|
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
5923
6066
|
"aria-label": activeLeftTab === "samples" ? "New sample" : "New template"
|
|
5924
6067
|
},
|
|
5925
|
-
/* @__PURE__ */
|
|
6068
|
+
/* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" })
|
|
5926
6069
|
))),
|
|
5927
|
-
/* @__PURE__ */
|
|
6070
|
+
/* @__PURE__ */ React57.createElement(
|
|
5928
6071
|
Tabs,
|
|
5929
6072
|
{
|
|
5930
6073
|
value: activeLeftTab,
|
|
@@ -5932,11 +6075,11 @@ function SamplesDrawer({
|
|
|
5932
6075
|
variant: "fullWidth",
|
|
5933
6076
|
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
5934
6077
|
},
|
|
5935
|
-
/* @__PURE__ */
|
|
5936
|
-
/* @__PURE__ */
|
|
5937
|
-
/* @__PURE__ */
|
|
6078
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "templates", label: "Templates", disabled: !loadTemplates }),
|
|
6079
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "samples", label: "Samples" }),
|
|
6080
|
+
/* @__PURE__ */ React57.createElement(Tab, { value: "outline", label: "Outline" })
|
|
5938
6081
|
),
|
|
5939
|
-
activeLeftTab === "outline" ? /* @__PURE__ */
|
|
6082
|
+
activeLeftTab === "outline" ? /* @__PURE__ */ React57.createElement(OutlinePanel, null) : /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
5940
6083
|
TextField,
|
|
5941
6084
|
{
|
|
5942
6085
|
size: "small",
|
|
@@ -5944,10 +6087,10 @@ function SamplesDrawer({
|
|
|
5944
6087
|
value: search,
|
|
5945
6088
|
onChange: (e) => setSearch(e.target.value),
|
|
5946
6089
|
InputProps: {
|
|
5947
|
-
startAdornment: /* @__PURE__ */
|
|
6090
|
+
startAdornment: /* @__PURE__ */ React57.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React57.createElement(SearchOutlined, { fontSize: "small" }))
|
|
5948
6091
|
}
|
|
5949
6092
|
}
|
|
5950
|
-
), /* @__PURE__ */
|
|
6093
|
+
), /* @__PURE__ */ React57.createElement(
|
|
5951
6094
|
TextField,
|
|
5952
6095
|
{
|
|
5953
6096
|
select: true,
|
|
@@ -5956,8 +6099,8 @@ function SamplesDrawer({
|
|
|
5956
6099
|
value: sortKey,
|
|
5957
6100
|
onChange: (e) => setSortKey(e.target.value)
|
|
5958
6101
|
},
|
|
5959
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
5960
|
-
), allTags.length > 0 && /* @__PURE__ */
|
|
6102
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React57.createElement(MenuItem, { key: opt.value, value: opt.value }, opt.label))
|
|
6103
|
+
), allTags.length > 0 && /* @__PURE__ */ React57.createElement(Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React57.createElement(
|
|
5961
6104
|
Chip,
|
|
5962
6105
|
{
|
|
5963
6106
|
label: "All",
|
|
@@ -5967,7 +6110,7 @@ function SamplesDrawer({
|
|
|
5967
6110
|
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
5968
6111
|
onClick: () => setActiveTags([])
|
|
5969
6112
|
}
|
|
5970
|
-
), allTags.map((tag) => /* @__PURE__ */
|
|
6113
|
+
), allTags.map((tag) => /* @__PURE__ */ React57.createElement(
|
|
5971
6114
|
Chip,
|
|
5972
6115
|
{
|
|
5973
6116
|
key: tag,
|
|
@@ -5978,7 +6121,7 @@ function SamplesDrawer({
|
|
|
5978
6121
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
5979
6122
|
onClick: () => toggleTag(tag)
|
|
5980
6123
|
}
|
|
5981
|
-
))), activeLeftTab === "templates" ? /* @__PURE__ */
|
|
6124
|
+
))), 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
6125
|
TemplateRow,
|
|
5983
6126
|
{
|
|
5984
6127
|
key: template.id,
|
|
@@ -5990,7 +6133,7 @@ function SamplesDrawer({
|
|
|
5990
6133
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
5991
6134
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
5992
6135
|
}
|
|
5993
|
-
))) : /* @__PURE__ */
|
|
6136
|
+
))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "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
6137
|
TemplateRow,
|
|
5995
6138
|
{
|
|
5996
6139
|
key: sample.id,
|
|
@@ -6002,9 +6145,9 @@ function SamplesDrawer({
|
|
|
6002
6145
|
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
6003
6146
|
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
6004
6147
|
}
|
|
6005
|
-
))) : /* @__PURE__ */
|
|
6148
|
+
))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? "No samples available" : "No samples match your filters")))
|
|
6006
6149
|
)
|
|
6007
|
-
), renameTarget && /* @__PURE__ */
|
|
6150
|
+
), renameTarget && /* @__PURE__ */ React57.createElement(
|
|
6008
6151
|
RenameDialog,
|
|
6009
6152
|
{
|
|
6010
6153
|
open: !!renameTarget,
|
|
@@ -6014,7 +6157,7 @@ function SamplesDrawer({
|
|
|
6014
6157
|
onClose: () => setRenameTarget(null),
|
|
6015
6158
|
onSubmit: handleRenameSubmit
|
|
6016
6159
|
}
|
|
6017
|
-
), /* @__PURE__ */
|
|
6160
|
+
), /* @__PURE__ */ React57.createElement(
|
|
6018
6161
|
SaveTemplateDialog,
|
|
6019
6162
|
{
|
|
6020
6163
|
open: !!pendingSaveAs,
|
|
@@ -6027,7 +6170,7 @@ function SamplesDrawer({
|
|
|
6027
6170
|
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
6028
6171
|
error: newError
|
|
6029
6172
|
}
|
|
6030
|
-
), /* @__PURE__ */
|
|
6173
|
+
), /* @__PURE__ */ React57.createElement(
|
|
6031
6174
|
NewTemplatePickerDialog,
|
|
6032
6175
|
{
|
|
6033
6176
|
open: pickerKind !== null,
|
|
@@ -6051,7 +6194,7 @@ var ICON_SX = {
|
|
|
6051
6194
|
borderColor: "cadet.300"
|
|
6052
6195
|
};
|
|
6053
6196
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
6054
|
-
return /* @__PURE__ */
|
|
6197
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6055
6198
|
Button$1,
|
|
6056
6199
|
{
|
|
6057
6200
|
sx: BUTTON_SX2,
|
|
@@ -6060,14 +6203,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
6060
6203
|
onClick();
|
|
6061
6204
|
}
|
|
6062
6205
|
},
|
|
6063
|
-
/* @__PURE__ */
|
|
6064
|
-
/* @__PURE__ */
|
|
6206
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: ICON_SX }, icon),
|
|
6207
|
+
/* @__PURE__ */ React57.createElement(Typography, { variant: "body2" }, label)
|
|
6065
6208
|
);
|
|
6066
6209
|
}
|
|
6067
6210
|
var BUTTONS = [
|
|
6068
6211
|
{
|
|
6069
6212
|
label: "Heading",
|
|
6070
|
-
icon: /* @__PURE__ */
|
|
6213
|
+
icon: /* @__PURE__ */ React57.createElement(HMobiledataOutlined, null),
|
|
6071
6214
|
block: () => ({
|
|
6072
6215
|
type: "Heading",
|
|
6073
6216
|
data: {
|
|
@@ -6080,7 +6223,7 @@ var BUTTONS = [
|
|
|
6080
6223
|
},
|
|
6081
6224
|
{
|
|
6082
6225
|
label: "Text",
|
|
6083
|
-
icon: /* @__PURE__ */
|
|
6226
|
+
icon: /* @__PURE__ */ React57.createElement(NotesOutlined, null),
|
|
6084
6227
|
block: () => ({
|
|
6085
6228
|
type: "Text",
|
|
6086
6229
|
data: {
|
|
@@ -6094,7 +6237,7 @@ var BUTTONS = [
|
|
|
6094
6237
|
},
|
|
6095
6238
|
{
|
|
6096
6239
|
label: "Button",
|
|
6097
|
-
icon: /* @__PURE__ */
|
|
6240
|
+
icon: /* @__PURE__ */ React57.createElement(SmartButtonOutlined, null),
|
|
6098
6241
|
block: () => ({
|
|
6099
6242
|
type: "Button",
|
|
6100
6243
|
data: {
|
|
@@ -6108,7 +6251,7 @@ var BUTTONS = [
|
|
|
6108
6251
|
},
|
|
6109
6252
|
{
|
|
6110
6253
|
label: "Image",
|
|
6111
|
-
icon: /* @__PURE__ */
|
|
6254
|
+
icon: /* @__PURE__ */ React57.createElement(ImageOutlined, null),
|
|
6112
6255
|
block: () => ({
|
|
6113
6256
|
type: "Image",
|
|
6114
6257
|
data: {
|
|
@@ -6124,7 +6267,7 @@ var BUTTONS = [
|
|
|
6124
6267
|
},
|
|
6125
6268
|
{
|
|
6126
6269
|
label: "Avatar",
|
|
6127
|
-
icon: /* @__PURE__ */
|
|
6270
|
+
icon: /* @__PURE__ */ React57.createElement(AccountCircleOutlined, null),
|
|
6128
6271
|
block: () => ({
|
|
6129
6272
|
type: "Avatar",
|
|
6130
6273
|
data: {
|
|
@@ -6138,7 +6281,7 @@ var BUTTONS = [
|
|
|
6138
6281
|
},
|
|
6139
6282
|
{
|
|
6140
6283
|
label: "Personal Signature",
|
|
6141
|
-
icon: /* @__PURE__ */
|
|
6284
|
+
icon: /* @__PURE__ */ React57.createElement(ContactMailOutlined, null),
|
|
6142
6285
|
block: () => ({
|
|
6143
6286
|
type: "Signature",
|
|
6144
6287
|
data: {
|
|
@@ -6160,7 +6303,7 @@ var BUTTONS = [
|
|
|
6160
6303
|
},
|
|
6161
6304
|
{
|
|
6162
6305
|
label: "Company Signature",
|
|
6163
|
-
icon: /* @__PURE__ */
|
|
6306
|
+
icon: /* @__PURE__ */ React57.createElement(BusinessOutlined, null),
|
|
6164
6307
|
block: () => ({
|
|
6165
6308
|
type: "Signature",
|
|
6166
6309
|
data: {
|
|
@@ -6180,7 +6323,7 @@ var BUTTONS = [
|
|
|
6180
6323
|
},
|
|
6181
6324
|
{
|
|
6182
6325
|
label: "Divider",
|
|
6183
|
-
icon: /* @__PURE__ */
|
|
6326
|
+
icon: /* @__PURE__ */ React57.createElement(HorizontalRuleOutlined, null),
|
|
6184
6327
|
block: () => ({
|
|
6185
6328
|
type: "Divider",
|
|
6186
6329
|
data: {
|
|
@@ -6193,7 +6336,7 @@ var BUTTONS = [
|
|
|
6193
6336
|
},
|
|
6194
6337
|
{
|
|
6195
6338
|
label: "Spacer",
|
|
6196
|
-
icon: /* @__PURE__ */
|
|
6339
|
+
icon: /* @__PURE__ */ React57.createElement(Crop32Outlined, null),
|
|
6197
6340
|
block: () => ({
|
|
6198
6341
|
type: "Spacer",
|
|
6199
6342
|
data: {}
|
|
@@ -6201,7 +6344,7 @@ var BUTTONS = [
|
|
|
6201
6344
|
},
|
|
6202
6345
|
{
|
|
6203
6346
|
label: "Html",
|
|
6204
|
-
icon: /* @__PURE__ */
|
|
6347
|
+
icon: /* @__PURE__ */ React57.createElement(HtmlOutlined, null),
|
|
6205
6348
|
block: () => ({
|
|
6206
6349
|
type: "Html",
|
|
6207
6350
|
data: {
|
|
@@ -6216,7 +6359,7 @@ var BUTTONS = [
|
|
|
6216
6359
|
},
|
|
6217
6360
|
{
|
|
6218
6361
|
label: "Columns",
|
|
6219
|
-
icon: /* @__PURE__ */
|
|
6362
|
+
icon: /* @__PURE__ */ React57.createElement(ViewColumnOutlined, null),
|
|
6220
6363
|
block: () => ({
|
|
6221
6364
|
type: "ColumnsContainer",
|
|
6222
6365
|
data: {
|
|
@@ -6231,7 +6374,7 @@ var BUTTONS = [
|
|
|
6231
6374
|
},
|
|
6232
6375
|
{
|
|
6233
6376
|
label: "Container",
|
|
6234
|
-
icon: /* @__PURE__ */
|
|
6377
|
+
icon: /* @__PURE__ */ React57.createElement(LibraryAddOutlined, null),
|
|
6235
6378
|
block: () => ({
|
|
6236
6379
|
type: "Container",
|
|
6237
6380
|
data: {
|
|
@@ -6255,7 +6398,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6255
6398
|
if (anchorEl === null) {
|
|
6256
6399
|
return null;
|
|
6257
6400
|
}
|
|
6258
|
-
return /* @__PURE__ */
|
|
6401
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6259
6402
|
Menu,
|
|
6260
6403
|
{
|
|
6261
6404
|
open: true,
|
|
@@ -6264,7 +6407,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6264
6407
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
6265
6408
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
6266
6409
|
},
|
|
6267
|
-
/* @__PURE__ */
|
|
6410
|
+
/* @__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
6411
|
);
|
|
6269
6412
|
}
|
|
6270
6413
|
function DividerButton({ buttonElement, onClick }) {
|
|
@@ -6291,7 +6434,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6291
6434
|
window.removeEventListener("mousemove", listener);
|
|
6292
6435
|
};
|
|
6293
6436
|
}, [buttonElement, setVisible]);
|
|
6294
|
-
return /* @__PURE__ */
|
|
6437
|
+
return /* @__PURE__ */ React57.createElement(Fade, { in: visible }, /* @__PURE__ */ React57.createElement(
|
|
6295
6438
|
IconButton,
|
|
6296
6439
|
{
|
|
6297
6440
|
size: "small",
|
|
@@ -6314,11 +6457,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6314
6457
|
onClick();
|
|
6315
6458
|
}
|
|
6316
6459
|
},
|
|
6317
|
-
/* @__PURE__ */
|
|
6460
|
+
/* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" })
|
|
6318
6461
|
));
|
|
6319
6462
|
}
|
|
6320
6463
|
function PlaceholderButton({ onClick }) {
|
|
6321
|
-
return /* @__PURE__ */
|
|
6464
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6322
6465
|
ButtonBase,
|
|
6323
6466
|
{
|
|
6324
6467
|
onClick: (ev) => {
|
|
@@ -6334,7 +6477,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
6334
6477
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
6335
6478
|
}
|
|
6336
6479
|
},
|
|
6337
|
-
/* @__PURE__ */
|
|
6480
|
+
/* @__PURE__ */ React57.createElement(
|
|
6338
6481
|
AddOutlined,
|
|
6339
6482
|
{
|
|
6340
6483
|
sx: {
|
|
@@ -6358,19 +6501,19 @@ function AddBlockButton({ onSelect, placeholder }) {
|
|
|
6358
6501
|
};
|
|
6359
6502
|
const renderButton2 = () => {
|
|
6360
6503
|
if (placeholder) {
|
|
6361
|
-
return /* @__PURE__ */
|
|
6504
|
+
return /* @__PURE__ */ React57.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
6362
6505
|
} else {
|
|
6363
|
-
return /* @__PURE__ */
|
|
6506
|
+
return /* @__PURE__ */ React57.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
6364
6507
|
}
|
|
6365
6508
|
};
|
|
6366
|
-
return /* @__PURE__ */
|
|
6509
|
+
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
6510
|
}
|
|
6368
6511
|
var BlockParentContext = createContext(null);
|
|
6369
6512
|
function BlockParentProvider({
|
|
6370
6513
|
info,
|
|
6371
6514
|
children
|
|
6372
6515
|
}) {
|
|
6373
|
-
return /* @__PURE__ */
|
|
6516
|
+
return /* @__PURE__ */ React57.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6374
6517
|
}
|
|
6375
6518
|
function useBlockParent() {
|
|
6376
6519
|
return useContext(BlockParentContext);
|
|
@@ -6400,9 +6543,9 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6400
6543
|
});
|
|
6401
6544
|
};
|
|
6402
6545
|
if (!childrenIds || childrenIds.length === 0) {
|
|
6403
|
-
return /* @__PURE__ */
|
|
6546
|
+
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
6547
|
}
|
|
6405
|
-
return /* @__PURE__ */
|
|
6548
|
+
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
6549
|
}
|
|
6407
6550
|
function CanvasDropZone({
|
|
6408
6551
|
parentRef,
|
|
@@ -6439,7 +6582,7 @@ function CanvasDropZone({
|
|
|
6439
6582
|
}
|
|
6440
6583
|
setDraggingBlock(null);
|
|
6441
6584
|
};
|
|
6442
|
-
return /* @__PURE__ */
|
|
6585
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6443
6586
|
Box,
|
|
6444
6587
|
{
|
|
6445
6588
|
onDragOver: handleDragOver,
|
|
@@ -6482,13 +6625,13 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6482
6625
|
});
|
|
6483
6626
|
setSelectedBlockId(blockId);
|
|
6484
6627
|
};
|
|
6485
|
-
return /* @__PURE__ */
|
|
6628
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6486
6629
|
columns_container_default,
|
|
6487
6630
|
{
|
|
6488
6631
|
props: restProps,
|
|
6489
6632
|
style,
|
|
6490
6633
|
columns: [
|
|
6491
|
-
/* @__PURE__ */
|
|
6634
|
+
/* @__PURE__ */ React57.createElement(
|
|
6492
6635
|
EditorChildrenIds,
|
|
6493
6636
|
{
|
|
6494
6637
|
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
@@ -6496,7 +6639,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6496
6639
|
onChange: (change) => updateColumn(0, change)
|
|
6497
6640
|
}
|
|
6498
6641
|
),
|
|
6499
|
-
/* @__PURE__ */
|
|
6642
|
+
/* @__PURE__ */ React57.createElement(
|
|
6500
6643
|
EditorChildrenIds,
|
|
6501
6644
|
{
|
|
6502
6645
|
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
@@ -6504,7 +6647,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6504
6647
|
onChange: (change) => updateColumn(1, change)
|
|
6505
6648
|
}
|
|
6506
6649
|
),
|
|
6507
|
-
/* @__PURE__ */
|
|
6650
|
+
/* @__PURE__ */ React57.createElement(
|
|
6508
6651
|
EditorChildrenIds,
|
|
6509
6652
|
{
|
|
6510
6653
|
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
@@ -6521,7 +6664,7 @@ function ContainerEditor({ style, props }) {
|
|
|
6521
6664
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
6522
6665
|
const document2 = useDocument();
|
|
6523
6666
|
const currentBlockId = useCurrentBlockId();
|
|
6524
|
-
return /* @__PURE__ */
|
|
6667
|
+
return /* @__PURE__ */ React57.createElement(container_default, { style }, /* @__PURE__ */ React57.createElement(
|
|
6525
6668
|
EditorChildrenIds,
|
|
6526
6669
|
{
|
|
6527
6670
|
childrenIds,
|
|
@@ -6722,7 +6865,7 @@ function EmailLayoutEditor(props) {
|
|
|
6722
6865
|
lineHeight: "1.5",
|
|
6723
6866
|
margin: "0"
|
|
6724
6867
|
};
|
|
6725
|
-
const editorChildren = /* @__PURE__ */
|
|
6868
|
+
const editorChildren = /* @__PURE__ */ React57.createElement(
|
|
6726
6869
|
EditorChildrenIds,
|
|
6727
6870
|
{
|
|
6728
6871
|
childrenIds,
|
|
@@ -6750,7 +6893,7 @@ function EmailLayoutEditor(props) {
|
|
|
6750
6893
|
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
6751
6894
|
};
|
|
6752
6895
|
if (props.backdropDisabled) {
|
|
6753
|
-
return /* @__PURE__ */
|
|
6896
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6754
6897
|
"div",
|
|
6755
6898
|
{
|
|
6756
6899
|
onClick: () => {
|
|
@@ -6763,7 +6906,7 @@ function EmailLayoutEditor(props) {
|
|
|
6763
6906
|
minHeight: "100%"
|
|
6764
6907
|
})
|
|
6765
6908
|
},
|
|
6766
|
-
/* @__PURE__ */
|
|
6909
|
+
/* @__PURE__ */ React57.createElement(
|
|
6767
6910
|
"div",
|
|
6768
6911
|
{
|
|
6769
6912
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6771,11 +6914,11 @@ function EmailLayoutEditor(props) {
|
|
|
6771
6914
|
padding: "32px"
|
|
6772
6915
|
})
|
|
6773
6916
|
},
|
|
6774
|
-
/* @__PURE__ */
|
|
6917
|
+
/* @__PURE__ */ React57.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
6775
6918
|
)
|
|
6776
6919
|
);
|
|
6777
6920
|
}
|
|
6778
|
-
return /* @__PURE__ */
|
|
6921
|
+
return /* @__PURE__ */ React57.createElement(
|
|
6779
6922
|
"div",
|
|
6780
6923
|
{
|
|
6781
6924
|
onClick: () => {
|
|
@@ -6788,7 +6931,7 @@ function EmailLayoutEditor(props) {
|
|
|
6788
6931
|
minHeight: "100%"
|
|
6789
6932
|
})
|
|
6790
6933
|
},
|
|
6791
|
-
/* @__PURE__ */
|
|
6934
|
+
/* @__PURE__ */ React57.createElement(
|
|
6792
6935
|
"div",
|
|
6793
6936
|
{
|
|
6794
6937
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -6796,7 +6939,7 @@ function EmailLayoutEditor(props) {
|
|
|
6796
6939
|
padding: "32px 0"
|
|
6797
6940
|
})
|
|
6798
6941
|
},
|
|
6799
|
-
/* @__PURE__ */
|
|
6942
|
+
/* @__PURE__ */ React57.createElement(
|
|
6800
6943
|
"table",
|
|
6801
6944
|
{
|
|
6802
6945
|
align: "center",
|
|
@@ -6820,7 +6963,7 @@ function EmailLayoutEditor(props) {
|
|
|
6820
6963
|
cellPadding: "0",
|
|
6821
6964
|
border: 0
|
|
6822
6965
|
},
|
|
6823
|
-
/* @__PURE__ */
|
|
6966
|
+
/* @__PURE__ */ React57.createElement("tbody", null, /* @__PURE__ */ React57.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React57.createElement("td", null, editorChildren)))
|
|
6824
6967
|
)
|
|
6825
6968
|
)
|
|
6826
6969
|
);
|
|
@@ -6980,7 +7123,7 @@ function TuneMenu({ blockId }) {
|
|
|
6980
7123
|
resetDocument(nDocument);
|
|
6981
7124
|
setSelectedBlockId(blockId);
|
|
6982
7125
|
};
|
|
6983
|
-
return /* @__PURE__ */
|
|
7126
|
+
return /* @__PURE__ */ React57.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React57.createElement(Stack, null, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(DeleteOutlined, { fontSize: "small" })))));
|
|
6984
7127
|
}
|
|
6985
7128
|
|
|
6986
7129
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
@@ -7002,7 +7145,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7002
7145
|
if (selectedBlockId !== blockId) {
|
|
7003
7146
|
return null;
|
|
7004
7147
|
}
|
|
7005
|
-
return /* @__PURE__ */
|
|
7148
|
+
return /* @__PURE__ */ React57.createElement(TuneMenu, { blockId });
|
|
7006
7149
|
};
|
|
7007
7150
|
const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
|
|
7008
7151
|
const handleDragStart = (e) => {
|
|
@@ -7015,7 +7158,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7015
7158
|
const handleDragEnd = () => {
|
|
7016
7159
|
setDraggingBlock(null);
|
|
7017
7160
|
};
|
|
7018
|
-
return /* @__PURE__ */
|
|
7161
|
+
return /* @__PURE__ */ React57.createElement(
|
|
7019
7162
|
Box,
|
|
7020
7163
|
{
|
|
7021
7164
|
draggable,
|
|
@@ -7160,7 +7303,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7160
7303
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7161
7304
|
});
|
|
7162
7305
|
};
|
|
7163
|
-
return /* @__PURE__ */
|
|
7306
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57.createElement(
|
|
7164
7307
|
"input",
|
|
7165
7308
|
{
|
|
7166
7309
|
type: "text",
|
|
@@ -7177,7 +7320,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7177
7320
|
}
|
|
7178
7321
|
));
|
|
7179
7322
|
}
|
|
7180
|
-
return /* @__PURE__ */
|
|
7323
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React57.createElement("span", { style: linkStyle }, /* @__PURE__ */ React57.createElement("span", null, text)));
|
|
7181
7324
|
}
|
|
7182
7325
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
7183
7326
|
const textareaRef = useRef(null);
|
|
@@ -7321,7 +7464,7 @@ function InlineFormattingToolbar({
|
|
|
7321
7464
|
}
|
|
7322
7465
|
}, [linkPrompt]);
|
|
7323
7466
|
const preventBlur = (e) => e.preventDefault();
|
|
7324
|
-
return /* @__PURE__ */
|
|
7467
|
+
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
7468
|
TextField,
|
|
7326
7469
|
{
|
|
7327
7470
|
inputRef,
|
|
@@ -7343,7 +7486,7 @@ function InlineFormattingToolbar({
|
|
|
7343
7486
|
},
|
|
7344
7487
|
sx: { width: 220 }
|
|
7345
7488
|
}
|
|
7346
|
-
)) : /* @__PURE__ */
|
|
7489
|
+
)) : /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onBold, title: "Bold (Cmd+B)", "aria-label": "Bold" }, /* @__PURE__ */ React57.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onItalic, title: "Italic (Cmd+I)", "aria-label": "Italic" }, /* @__PURE__ */ React57.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: "Link (Cmd+K)", "aria-label": "Link" }, /* @__PURE__ */ React57.createElement(LinkOutlined, { fontSize: "small" })))));
|
|
7347
7490
|
}
|
|
7348
7491
|
|
|
7349
7492
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -7498,7 +7641,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7498
7641
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7499
7642
|
}, [localText, isSelected]);
|
|
7500
7643
|
if (isSelected) {
|
|
7501
|
-
return /* @__PURE__ */
|
|
7644
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
7502
7645
|
"textarea",
|
|
7503
7646
|
{
|
|
7504
7647
|
ref: textareaRef,
|
|
@@ -7516,7 +7659,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7516
7659
|
rows: 1,
|
|
7517
7660
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7518
7661
|
}
|
|
7519
|
-
), /* @__PURE__ */
|
|
7662
|
+
), /* @__PURE__ */ React57.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7520
7663
|
}
|
|
7521
7664
|
const headingProps = isMarkdown ? {
|
|
7522
7665
|
ref: displayRef,
|
|
@@ -7525,11 +7668,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7525
7668
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
7526
7669
|
switch (level) {
|
|
7527
7670
|
case "h1":
|
|
7528
|
-
return /* @__PURE__ */
|
|
7671
|
+
return /* @__PURE__ */ React57.createElement("h1", __spreadValues({}, headingProps));
|
|
7529
7672
|
case "h2":
|
|
7530
|
-
return /* @__PURE__ */
|
|
7673
|
+
return /* @__PURE__ */ React57.createElement("h2", __spreadValues({}, headingProps));
|
|
7531
7674
|
case "h3":
|
|
7532
|
-
return /* @__PURE__ */
|
|
7675
|
+
return /* @__PURE__ */ React57.createElement("h3", __spreadValues({}, headingProps));
|
|
7533
7676
|
}
|
|
7534
7677
|
}
|
|
7535
7678
|
function HtmlEditor({ style, props }) {
|
|
@@ -7594,7 +7737,7 @@ function HtmlEditor({ style, props }) {
|
|
|
7594
7737
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7595
7738
|
});
|
|
7596
7739
|
};
|
|
7597
|
-
return /* @__PURE__ */
|
|
7740
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle }, /* @__PURE__ */ React57.createElement(
|
|
7598
7741
|
"textarea",
|
|
7599
7742
|
{
|
|
7600
7743
|
value: localContents,
|
|
@@ -7614,9 +7757,9 @@ function HtmlEditor({ style, props }) {
|
|
|
7614
7757
|
));
|
|
7615
7758
|
}
|
|
7616
7759
|
if (!contents) {
|
|
7617
|
-
return /* @__PURE__ */
|
|
7760
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle });
|
|
7618
7761
|
}
|
|
7619
|
-
return /* @__PURE__ */
|
|
7762
|
+
return /* @__PURE__ */ React57.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
7620
7763
|
}
|
|
7621
7764
|
function getImageBorderRadius2(shape, size) {
|
|
7622
7765
|
switch (shape) {
|
|
@@ -7731,7 +7874,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7731
7874
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
7732
7875
|
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
7876
|
};
|
|
7734
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
7877
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React57.createElement(
|
|
7735
7878
|
"img",
|
|
7736
7879
|
{
|
|
7737
7880
|
src: imageUrl,
|
|
@@ -7749,7 +7892,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7749
7892
|
}
|
|
7750
7893
|
}
|
|
7751
7894
|
) : null;
|
|
7752
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
7895
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React57.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React57.createElement(
|
|
7753
7896
|
"input",
|
|
7754
7897
|
{
|
|
7755
7898
|
value: localGreeting,
|
|
@@ -7760,8 +7903,8 @@ function SignatureEditor({ style, props }) {
|
|
|
7760
7903
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
7761
7904
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
7762
7905
|
}
|
|
7763
|
-
)) : greeting ? /* @__PURE__ */
|
|
7764
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
7906
|
+
)) : greeting ? /* @__PURE__ */ React57.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
7907
|
+
const textContent = isSelected ? /* @__PURE__ */ React57.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React57.createElement(
|
|
7765
7908
|
"input",
|
|
7766
7909
|
{
|
|
7767
7910
|
value: localName,
|
|
@@ -7772,7 +7915,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7772
7915
|
placeholder: "Name",
|
|
7773
7916
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
7774
7917
|
}
|
|
7775
|
-
), /* @__PURE__ */
|
|
7918
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7776
7919
|
"input",
|
|
7777
7920
|
{
|
|
7778
7921
|
value: localTitle,
|
|
@@ -7783,7 +7926,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7783
7926
|
placeholder: "Title",
|
|
7784
7927
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7785
7928
|
}
|
|
7786
|
-
), /* @__PURE__ */
|
|
7929
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7787
7930
|
"input",
|
|
7788
7931
|
{
|
|
7789
7932
|
value: localCompany,
|
|
@@ -7794,7 +7937,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7794
7937
|
placeholder: "Company",
|
|
7795
7938
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7796
7939
|
}
|
|
7797
|
-
), /* @__PURE__ */
|
|
7940
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7798
7941
|
"input",
|
|
7799
7942
|
{
|
|
7800
7943
|
value: localAddress,
|
|
@@ -7805,7 +7948,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7805
7948
|
placeholder: "Address",
|
|
7806
7949
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
7807
7950
|
}
|
|
7808
|
-
), /* @__PURE__ */
|
|
7951
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7809
7952
|
"input",
|
|
7810
7953
|
{
|
|
7811
7954
|
value: localEmail,
|
|
@@ -7816,7 +7959,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7816
7959
|
placeholder: "Email",
|
|
7817
7960
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
7818
7961
|
}
|
|
7819
|
-
), /* @__PURE__ */
|
|
7962
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7820
7963
|
"input",
|
|
7821
7964
|
{
|
|
7822
7965
|
value: localPhone,
|
|
@@ -7827,7 +7970,7 @@ function SignatureEditor({ style, props }) {
|
|
|
7827
7970
|
placeholder: "Phone",
|
|
7828
7971
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7829
7972
|
}
|
|
7830
|
-
), /* @__PURE__ */
|
|
7973
|
+
), /* @__PURE__ */ React57.createElement(
|
|
7831
7974
|
"input",
|
|
7832
7975
|
{
|
|
7833
7976
|
value: localWebsite,
|
|
@@ -7838,11 +7981,11 @@ function SignatureEditor({ style, props }) {
|
|
|
7838
7981
|
placeholder: "Website",
|
|
7839
7982
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
7840
7983
|
}
|
|
7841
|
-
)) : /* @__PURE__ */
|
|
7984
|
+
)) : /* @__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
7985
|
if (layout === "vertical") {
|
|
7843
|
-
return /* @__PURE__ */
|
|
7986
|
+
return /* @__PURE__ */ React57.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React57.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
7844
7987
|
}
|
|
7845
|
-
return /* @__PURE__ */
|
|
7988
|
+
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
7989
|
}
|
|
7847
7990
|
function getFontFamily10(fontFamily) {
|
|
7848
7991
|
switch (fontFamily) {
|
|
@@ -7986,7 +8129,7 @@ function TextEditor({ style, props }) {
|
|
|
7986
8129
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7987
8130
|
}, [localText, isSelected]);
|
|
7988
8131
|
if (isSelected) {
|
|
7989
|
-
return /* @__PURE__ */
|
|
8132
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
7990
8133
|
"textarea",
|
|
7991
8134
|
{
|
|
7992
8135
|
ref: textareaRef,
|
|
@@ -8004,10 +8147,10 @@ function TextEditor({ style, props }) {
|
|
|
8004
8147
|
rows: 1,
|
|
8005
8148
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
8006
8149
|
}
|
|
8007
|
-
), /* @__PURE__ */
|
|
8150
|
+
), /* @__PURE__ */ React57.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
8008
8151
|
}
|
|
8009
8152
|
if (isMarkdown) {
|
|
8010
|
-
return /* @__PURE__ */
|
|
8153
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8011
8154
|
"div",
|
|
8012
8155
|
{
|
|
8013
8156
|
ref: displayRef,
|
|
@@ -8016,34 +8159,34 @@ function TextEditor({ style, props }) {
|
|
|
8016
8159
|
}
|
|
8017
8160
|
);
|
|
8018
8161
|
}
|
|
8019
|
-
return /* @__PURE__ */
|
|
8162
|
+
return /* @__PURE__ */ React57.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
8020
8163
|
}
|
|
8021
8164
|
|
|
8022
8165
|
// src/editor/core.tsx
|
|
8023
8166
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
8024
8167
|
Avatar: {
|
|
8025
8168
|
schema: AvatarPropsSchema,
|
|
8026
|
-
Component: (props) => /* @__PURE__ */
|
|
8169
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(avatar_default, __spreadValues({}, props)))
|
|
8027
8170
|
},
|
|
8028
8171
|
Button: {
|
|
8029
8172
|
schema: ButtonPropsSchema,
|
|
8030
|
-
Component: (props) => /* @__PURE__ */
|
|
8173
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
8031
8174
|
},
|
|
8032
8175
|
Container: {
|
|
8033
8176
|
schema: container_props_schema_default,
|
|
8034
|
-
Component: (props) => /* @__PURE__ */
|
|
8177
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
8035
8178
|
},
|
|
8036
8179
|
ColumnsContainer: {
|
|
8037
8180
|
schema: columns_container_props_schema_default2,
|
|
8038
|
-
Component: (props) => /* @__PURE__ */
|
|
8181
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
8039
8182
|
},
|
|
8040
8183
|
Heading: {
|
|
8041
8184
|
schema: HeadingPropsSchema,
|
|
8042
|
-
Component: (props) => /* @__PURE__ */
|
|
8185
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
8043
8186
|
},
|
|
8044
8187
|
Html: {
|
|
8045
8188
|
schema: HtmlPropsSchema,
|
|
8046
|
-
Component: (props) => /* @__PURE__ */
|
|
8189
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
8047
8190
|
},
|
|
8048
8191
|
Image: {
|
|
8049
8192
|
schema: ImagePropsSchema,
|
|
@@ -8055,28 +8198,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
8055
8198
|
linkHref: null
|
|
8056
8199
|
})
|
|
8057
8200
|
});
|
|
8058
|
-
return /* @__PURE__ */
|
|
8201
|
+
return /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(image_default, __spreadValues({}, props)));
|
|
8059
8202
|
}
|
|
8060
8203
|
},
|
|
8061
8204
|
Text: {
|
|
8062
8205
|
schema: TextPropsSchema,
|
|
8063
|
-
Component: (props) => /* @__PURE__ */
|
|
8206
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(TextEditor, __spreadValues({}, props)))
|
|
8064
8207
|
},
|
|
8065
8208
|
EmailLayout: {
|
|
8066
8209
|
schema: email_layout_props_schema_default,
|
|
8067
|
-
Component: (p) => /* @__PURE__ */
|
|
8210
|
+
Component: (p) => /* @__PURE__ */ React57.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
8068
8211
|
},
|
|
8069
8212
|
Spacer: {
|
|
8070
8213
|
schema: SpacerPropsSchema,
|
|
8071
|
-
Component: (props) => /* @__PURE__ */
|
|
8214
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(spacer_default, __spreadValues({}, props)))
|
|
8072
8215
|
},
|
|
8073
8216
|
Divider: {
|
|
8074
8217
|
schema: DividerPropsSchema,
|
|
8075
|
-
Component: (props) => /* @__PURE__ */
|
|
8218
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(divider_default, __spreadValues({}, props)))
|
|
8076
8219
|
},
|
|
8077
8220
|
Signature: {
|
|
8078
8221
|
schema: SignaturePropsSchema,
|
|
8079
|
-
Component: (props) => /* @__PURE__ */
|
|
8222
|
+
Component: (props) => /* @__PURE__ */ React57.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React57.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
8080
8223
|
}
|
|
8081
8224
|
});
|
|
8082
8225
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -8092,7 +8235,7 @@ function EditorBlock({ id }) {
|
|
|
8092
8235
|
if (!block) {
|
|
8093
8236
|
throw new Error("Could not find block");
|
|
8094
8237
|
}
|
|
8095
|
-
return /* @__PURE__ */
|
|
8238
|
+
return /* @__PURE__ */ React57.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React57.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
8096
8239
|
}
|
|
8097
8240
|
function ToggleInspectorPanelButton() {
|
|
8098
8241
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -8100,20 +8243,20 @@ function ToggleInspectorPanelButton() {
|
|
|
8100
8243
|
toggleInspectorDrawerOpen();
|
|
8101
8244
|
};
|
|
8102
8245
|
if (inspectorDrawerOpen) {
|
|
8103
|
-
return /* @__PURE__ */
|
|
8246
|
+
return /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React57.createElement(LastPageOutlined, { fontSize: "small" }));
|
|
8104
8247
|
}
|
|
8105
|
-
return /* @__PURE__ */
|
|
8248
|
+
return /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React57.createElement(AppRegistrationOutlined, { fontSize: "small" }));
|
|
8106
8249
|
}
|
|
8107
8250
|
function useIcon() {
|
|
8108
8251
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8109
8252
|
if (samplesDrawerOpen) {
|
|
8110
|
-
return /* @__PURE__ */
|
|
8253
|
+
return /* @__PURE__ */ React57.createElement(FirstPageOutlined, { fontSize: "small" });
|
|
8111
8254
|
}
|
|
8112
|
-
return /* @__PURE__ */
|
|
8255
|
+
return /* @__PURE__ */ React57.createElement(MenuOutlined, { fontSize: "small" });
|
|
8113
8256
|
}
|
|
8114
8257
|
function ToggleSamplesPanelButton() {
|
|
8115
8258
|
const icon = useIcon();
|
|
8116
|
-
return /* @__PURE__ */
|
|
8259
|
+
return /* @__PURE__ */ React57.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
8117
8260
|
}
|
|
8118
8261
|
function formatHtml(html2, spaces = 2) {
|
|
8119
8262
|
try {
|
|
@@ -8175,7 +8318,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8175
8318
|
if (code === null) {
|
|
8176
8319
|
return null;
|
|
8177
8320
|
}
|
|
8178
|
-
return /* @__PURE__ */
|
|
8321
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8179
8322
|
"pre",
|
|
8180
8323
|
{
|
|
8181
8324
|
style: {
|
|
@@ -8201,17 +8344,17 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8201
8344
|
function HtmlPanel() {
|
|
8202
8345
|
const document2 = useDocument();
|
|
8203
8346
|
const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
8204
|
-
return /* @__PURE__ */
|
|
8347
|
+
return /* @__PURE__ */ React57.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
8205
8348
|
}
|
|
8206
8349
|
function JsonPanel() {
|
|
8207
8350
|
const document2 = useDocument();
|
|
8208
8351
|
const code = useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
8209
|
-
return /* @__PURE__ */
|
|
8352
|
+
return /* @__PURE__ */ React57.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
8210
8353
|
}
|
|
8211
8354
|
function TextPanel() {
|
|
8212
8355
|
const document2 = useDocument();
|
|
8213
8356
|
const text = useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
8214
|
-
return /* @__PURE__ */
|
|
8357
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8215
8358
|
"pre",
|
|
8216
8359
|
{
|
|
8217
8360
|
style: {
|
|
@@ -8247,35 +8390,35 @@ function MainTabsGroup() {
|
|
|
8247
8390
|
setSelectedMainTab("editor");
|
|
8248
8391
|
}
|
|
8249
8392
|
};
|
|
8250
|
-
return /* @__PURE__ */
|
|
8393
|
+
return /* @__PURE__ */ React57.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React57.createElement(
|
|
8251
8394
|
Tab,
|
|
8252
8395
|
{
|
|
8253
8396
|
value: "editor",
|
|
8254
|
-
label: /* @__PURE__ */
|
|
8397
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React57.createElement(EditOutlined, { fontSize: "small" }))
|
|
8255
8398
|
}
|
|
8256
|
-
), /* @__PURE__ */
|
|
8399
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8257
8400
|
Tab,
|
|
8258
8401
|
{
|
|
8259
8402
|
value: "preview",
|
|
8260
|
-
label: /* @__PURE__ */
|
|
8403
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React57.createElement(PreviewOutlined, { fontSize: "small" }))
|
|
8261
8404
|
}
|
|
8262
|
-
), /* @__PURE__ */
|
|
8405
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8263
8406
|
Tab,
|
|
8264
8407
|
{
|
|
8265
8408
|
value: "html",
|
|
8266
|
-
label: /* @__PURE__ */
|
|
8409
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React57.createElement(CodeOutlined, { fontSize: "small" }))
|
|
8267
8410
|
}
|
|
8268
|
-
), /* @__PURE__ */
|
|
8411
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8269
8412
|
Tab,
|
|
8270
8413
|
{
|
|
8271
8414
|
value: "text",
|
|
8272
|
-
label: /* @__PURE__ */
|
|
8415
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React57.createElement(SubjectOutlined, { fontSize: "small" }))
|
|
8273
8416
|
}
|
|
8274
|
-
), /* @__PURE__ */
|
|
8417
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8275
8418
|
Tab,
|
|
8276
8419
|
{
|
|
8277
8420
|
value: "json",
|
|
8278
|
-
label: /* @__PURE__ */
|
|
8421
|
+
label: /* @__PURE__ */ React57.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React57.createElement(DataObjectOutlined, { fontSize: "small" }))
|
|
8279
8422
|
}
|
|
8280
8423
|
));
|
|
8281
8424
|
}
|
|
@@ -8328,7 +8471,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8328
8471
|
return false;
|
|
8329
8472
|
}
|
|
8330
8473
|
});
|
|
8331
|
-
return /* @__PURE__ */
|
|
8474
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
8332
8475
|
Box,
|
|
8333
8476
|
{
|
|
8334
8477
|
sx: {
|
|
@@ -8341,7 +8484,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8341
8484
|
pb: 3
|
|
8342
8485
|
}
|
|
8343
8486
|
},
|
|
8344
|
-
/* @__PURE__ */
|
|
8487
|
+
/* @__PURE__ */ React57.createElement(
|
|
8345
8488
|
Box,
|
|
8346
8489
|
{
|
|
8347
8490
|
sx: {
|
|
@@ -8356,7 +8499,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8356
8499
|
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
8357
8500
|
}
|
|
8358
8501
|
},
|
|
8359
|
-
hasOpenRow && currentTemplateName && /* @__PURE__ */
|
|
8502
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React57.createElement(
|
|
8360
8503
|
Box,
|
|
8361
8504
|
{
|
|
8362
8505
|
sx: {
|
|
@@ -8372,25 +8515,25 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8372
8515
|
title: currentTemplateName
|
|
8373
8516
|
},
|
|
8374
8517
|
isSample ? "Sample \xB7 " : "",
|
|
8375
|
-
/* @__PURE__ */
|
|
8518
|
+
/* @__PURE__ */ React57.createElement(Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8376
8519
|
),
|
|
8377
|
-
/* @__PURE__ */
|
|
8520
|
+
/* @__PURE__ */ React57.createElement(Tooltip, { title: hasOpenRow ? `Save changes${isSample ? " to this sample" : ""}` : "Save as a new template" }, /* @__PURE__ */ React57.createElement(
|
|
8378
8521
|
Button$1,
|
|
8379
8522
|
{
|
|
8380
8523
|
variant: "contained",
|
|
8381
8524
|
size: "large",
|
|
8382
|
-
startIcon: /* @__PURE__ */
|
|
8525
|
+
startIcon: /* @__PURE__ */ React57.createElement(SaveOutlined, null),
|
|
8383
8526
|
onClick: handlePrimary,
|
|
8384
8527
|
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8385
8528
|
},
|
|
8386
8529
|
primaryLabel
|
|
8387
8530
|
)),
|
|
8388
|
-
hasOpenRow && saveAs && /* @__PURE__ */
|
|
8531
|
+
hasOpenRow && saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Save as a new template" }, /* @__PURE__ */ React57.createElement(
|
|
8389
8532
|
Button$1,
|
|
8390
8533
|
{
|
|
8391
8534
|
variant: "outlined",
|
|
8392
8535
|
size: "large",
|
|
8393
|
-
startIcon: /* @__PURE__ */
|
|
8536
|
+
startIcon: /* @__PURE__ */ React57.createElement(SaveAsOutlined, null),
|
|
8394
8537
|
onClick: () => {
|
|
8395
8538
|
setNameError(null);
|
|
8396
8539
|
setDialogMode("save-as");
|
|
@@ -8399,12 +8542,12 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8399
8542
|
},
|
|
8400
8543
|
"Save as\u2026"
|
|
8401
8544
|
)),
|
|
8402
|
-
saveAs && /* @__PURE__ */
|
|
8545
|
+
saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Start a fresh template" }, /* @__PURE__ */ React57.createElement(
|
|
8403
8546
|
Button$1,
|
|
8404
8547
|
{
|
|
8405
8548
|
variant: "text",
|
|
8406
8549
|
size: "large",
|
|
8407
|
-
startIcon: /* @__PURE__ */
|
|
8550
|
+
startIcon: /* @__PURE__ */ React57.createElement(AddOutlined, null),
|
|
8408
8551
|
onClick: () => {
|
|
8409
8552
|
setNameError(null);
|
|
8410
8553
|
setDialogMode("new-blank");
|
|
@@ -8414,7 +8557,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8414
8557
|
"New"
|
|
8415
8558
|
))
|
|
8416
8559
|
)
|
|
8417
|
-
), /* @__PURE__ */
|
|
8560
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8418
8561
|
SaveTemplateDialog,
|
|
8419
8562
|
{
|
|
8420
8563
|
open: dialogMode !== null,
|
|
@@ -8452,7 +8595,7 @@ function SubjectInput() {
|
|
|
8452
8595
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
8453
8596
|
});
|
|
8454
8597
|
};
|
|
8455
|
-
return /* @__PURE__ */
|
|
8598
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8456
8599
|
Box,
|
|
8457
8600
|
{
|
|
8458
8601
|
sx: {
|
|
@@ -8469,8 +8612,8 @@ function SubjectInput() {
|
|
|
8469
8612
|
gap: 1.5
|
|
8470
8613
|
}
|
|
8471
8614
|
},
|
|
8472
|
-
/* @__PURE__ */
|
|
8473
|
-
/* @__PURE__ */
|
|
8615
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8616
|
+
/* @__PURE__ */ React57.createElement(
|
|
8474
8617
|
InputBase,
|
|
8475
8618
|
{
|
|
8476
8619
|
fullWidth: true,
|
|
@@ -8496,7 +8639,7 @@ function SubjectPreview() {
|
|
|
8496
8639
|
if (!subject) return null;
|
|
8497
8640
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
8498
8641
|
const rendered = substituteSampleValues(subject, samples);
|
|
8499
|
-
return /* @__PURE__ */
|
|
8642
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8500
8643
|
Box,
|
|
8501
8644
|
{
|
|
8502
8645
|
sx: {
|
|
@@ -8513,8 +8656,8 @@ function SubjectPreview() {
|
|
|
8513
8656
|
gap: 1.5
|
|
8514
8657
|
}
|
|
8515
8658
|
},
|
|
8516
|
-
/* @__PURE__ */
|
|
8517
|
-
/* @__PURE__ */
|
|
8659
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8660
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { fontSize: 14 } }, rendered)
|
|
8518
8661
|
);
|
|
8519
8662
|
}
|
|
8520
8663
|
function generateId3() {
|
|
@@ -8587,7 +8730,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8587
8730
|
window.addEventListener("paste", handlePaste);
|
|
8588
8731
|
return () => window.removeEventListener("paste", handlePaste);
|
|
8589
8732
|
}, [active, uploadImage]);
|
|
8590
|
-
if (!active) return /* @__PURE__ */
|
|
8733
|
+
if (!active) return /* @__PURE__ */ React57.createElement(React57.Fragment, null, children);
|
|
8591
8734
|
const onDragEnter = (e) => {
|
|
8592
8735
|
var _a, _b;
|
|
8593
8736
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -8620,7 +8763,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8620
8763
|
setUploading(false);
|
|
8621
8764
|
}
|
|
8622
8765
|
});
|
|
8623
|
-
return /* @__PURE__ */
|
|
8766
|
+
return /* @__PURE__ */ React57.createElement(
|
|
8624
8767
|
Box,
|
|
8625
8768
|
{
|
|
8626
8769
|
ref: wrapperRef,
|
|
@@ -8631,7 +8774,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8631
8774
|
sx: { position: "relative" }
|
|
8632
8775
|
},
|
|
8633
8776
|
children,
|
|
8634
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
8777
|
+
(dragging || uploading) && /* @__PURE__ */ React57.createElement(
|
|
8635
8778
|
Box,
|
|
8636
8779
|
{
|
|
8637
8780
|
sx: {
|
|
@@ -8650,7 +8793,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
8650
8793
|
zIndex: 10
|
|
8651
8794
|
}
|
|
8652
8795
|
},
|
|
8653
|
-
/* @__PURE__ */
|
|
8796
|
+
/* @__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
8797
|
)
|
|
8655
8798
|
);
|
|
8656
8799
|
}
|
|
@@ -8690,7 +8833,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8690
8833
|
var _a;
|
|
8691
8834
|
switch (selectedMainTab) {
|
|
8692
8835
|
case "editor":
|
|
8693
|
-
return /* @__PURE__ */
|
|
8836
|
+
return /* @__PURE__ */ React57.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React57.createElement(EditorBlock, { id: "root" }));
|
|
8694
8837
|
case "preview": {
|
|
8695
8838
|
const rootBlock = document2.root;
|
|
8696
8839
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -8698,18 +8841,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8698
8841
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
8699
8842
|
);
|
|
8700
8843
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
8701
|
-
return /* @__PURE__ */
|
|
8844
|
+
return /* @__PURE__ */ React57.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React57.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
8702
8845
|
}
|
|
8703
8846
|
case "html":
|
|
8704
|
-
return /* @__PURE__ */
|
|
8847
|
+
return /* @__PURE__ */ React57.createElement(HtmlPanel, null);
|
|
8705
8848
|
case "text":
|
|
8706
|
-
return /* @__PURE__ */
|
|
8849
|
+
return /* @__PURE__ */ React57.createElement(TextPanel, null);
|
|
8707
8850
|
case "json":
|
|
8708
|
-
return /* @__PURE__ */
|
|
8851
|
+
return /* @__PURE__ */ React57.createElement(JsonPanel, null);
|
|
8709
8852
|
}
|
|
8710
8853
|
};
|
|
8711
8854
|
const showSaveButtons = persistenceEnabled;
|
|
8712
|
-
return /* @__PURE__ */
|
|
8855
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
|
|
8713
8856
|
Stack,
|
|
8714
8857
|
{
|
|
8715
8858
|
sx: {
|
|
@@ -8726,10 +8869,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8726
8869
|
justifyContent: "space-between",
|
|
8727
8870
|
alignItems: "center"
|
|
8728
8871
|
},
|
|
8729
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
8730
|
-
/* @__PURE__ */
|
|
8731
|
-
/* @__PURE__ */
|
|
8732
|
-
), selectedMainTab === "editor" && /* @__PURE__ */
|
|
8872
|
+
samplesDrawerEnabled && /* @__PURE__ */ React57.createElement(ToggleSamplesPanelButton, null),
|
|
8873
|
+
/* @__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" })))))),
|
|
8874
|
+
/* @__PURE__ */ React57.createElement(ToggleInspectorPanelButton, null)
|
|
8875
|
+
), 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
8876
|
Box,
|
|
8734
8877
|
{
|
|
8735
8878
|
sx: {
|
|
@@ -8745,8 +8888,8 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
8745
8888
|
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
8746
8889
|
}
|
|
8747
8890
|
},
|
|
8748
|
-
/* @__PURE__ */
|
|
8749
|
-
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */
|
|
8891
|
+
/* @__PURE__ */ React57.createElement(Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
|
|
8892
|
+
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React57.createElement(SaveBar, { loadTemplates, saveAs })
|
|
8750
8893
|
)));
|
|
8751
8894
|
}
|
|
8752
8895
|
|
|
@@ -8828,15 +8971,16 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
8828
8971
|
return getDocument();
|
|
8829
8972
|
}
|
|
8830
8973
|
}));
|
|
8831
|
-
return /* @__PURE__ */
|
|
8974
|
+
return /* @__PURE__ */ React57.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React57.createElement(
|
|
8832
8975
|
InspectorDrawer,
|
|
8833
8976
|
{
|
|
8834
8977
|
enterDuration: drawerEnterDuration,
|
|
8835
8978
|
exitDuration: drawerExitDuration,
|
|
8836
8979
|
deleteTemplate,
|
|
8837
|
-
copyTemplate
|
|
8980
|
+
copyTemplate,
|
|
8981
|
+
renameTemplate
|
|
8838
8982
|
}
|
|
8839
|
-
), /* @__PURE__ */
|
|
8983
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8840
8984
|
SamplesDrawer,
|
|
8841
8985
|
{
|
|
8842
8986
|
enterDuration: drawerEnterDuration,
|
|
@@ -8852,7 +8996,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
8852
8996
|
setTemplateKind,
|
|
8853
8997
|
saveAs
|
|
8854
8998
|
}
|
|
8855
|
-
), /* @__PURE__ */
|
|
8999
|
+
), /* @__PURE__ */ React57.createElement(
|
|
8856
9000
|
Stack,
|
|
8857
9001
|
{
|
|
8858
9002
|
sx: {
|
|
@@ -8861,7 +9005,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
8861
9005
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
8862
9006
|
}
|
|
8863
9007
|
},
|
|
8864
|
-
/* @__PURE__ */
|
|
9008
|
+
/* @__PURE__ */ React57.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
8865
9009
|
));
|
|
8866
9010
|
});
|
|
8867
9011
|
var EmailEditor = forwardRef((props, ref) => {
|
|
@@ -8905,7 +9049,7 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
8905
9049
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
8906
9050
|
[uploadImage, loadImages, deleteImage]
|
|
8907
9051
|
);
|
|
8908
|
-
return /* @__PURE__ */
|
|
9052
|
+
return /* @__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
9053
|
EmailEditorProvider,
|
|
8910
9054
|
{
|
|
8911
9055
|
initialTemplate: resolvedTemplate,
|
|
@@ -8914,7 +9058,7 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
8914
9058
|
onSave,
|
|
8915
9059
|
onChange
|
|
8916
9060
|
},
|
|
8917
|
-
/* @__PURE__ */
|
|
9061
|
+
/* @__PURE__ */ React57.createElement(
|
|
8918
9062
|
EmailEditorInternal,
|
|
8919
9063
|
{
|
|
8920
9064
|
ref,
|