@kontakto/email-template-editor 2.2.1 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -0
- package/dist/index.cjs +1837 -873
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +34 -6
- package/dist/index.d.ts +34 -6
- package/dist/index.js +1662 -701
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import DOMPurify from 'dompurify';
|
|
2
2
|
import { marked, Renderer } from 'marked';
|
|
3
|
-
import
|
|
3
|
+
import React62, { 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
|
+
import Handlebars from 'handlebars';
|
|
6
7
|
import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
|
|
7
|
-
import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, Tooltip, IconButton, TextField, InputAdornment, Chip, CircularProgress, Alert,
|
|
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';
|
|
8
9
|
import { create } from 'zustand';
|
|
9
|
-
import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined,
|
|
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
11
|
import { HexColorPicker, HexColorInput } from 'react-colorful';
|
|
11
12
|
import hljs from 'highlight.js';
|
|
12
13
|
import jsonHighlighter from 'highlight.js/lib/languages/json';
|
|
@@ -141,6 +142,13 @@ ${body}</tbody>
|
|
|
141
142
|
}
|
|
142
143
|
return `<a href="${href}" title="${title}" target="_blank">${text}</a>`;
|
|
143
144
|
}
|
|
145
|
+
// Give paragraphs an explicit bottom margin that matches a blank line in the
|
|
146
|
+
// raw source. Without this, click-to-edit swaps the rendered div (flattened
|
|
147
|
+
// by ambient CSS) for a textarea whose blank lines take a full line-height,
|
|
148
|
+
// causing a visible layout jump.
|
|
149
|
+
paragraph(text) {
|
|
150
|
+
return `<p style="margin:0 0 1em 0">${text}</p>`;
|
|
151
|
+
}
|
|
144
152
|
};
|
|
145
153
|
function renderMarkdownString(str) {
|
|
146
154
|
const html2 = marked.parse(str, {
|
|
@@ -173,7 +181,7 @@ function renderInlineMarkdownString(str) {
|
|
|
173
181
|
function EmailMarkdown(_a) {
|
|
174
182
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
175
183
|
const data = useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
176
|
-
return /* @__PURE__ */
|
|
184
|
+
return /* @__PURE__ */ React62.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
177
185
|
}
|
|
178
186
|
var FONT_FAMILY_SCHEMA = z.enum([
|
|
179
187
|
"MODERN_SANS",
|
|
@@ -253,9 +261,9 @@ function Text({ style, props }) {
|
|
|
253
261
|
};
|
|
254
262
|
const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
|
|
255
263
|
if (props == null ? void 0 : props.markdown) {
|
|
256
|
-
return /* @__PURE__ */
|
|
264
|
+
return /* @__PURE__ */ React62.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
257
265
|
}
|
|
258
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wStyle }, text);
|
|
259
267
|
}
|
|
260
268
|
var PADDING_SCHEMA2 = z.object({
|
|
261
269
|
top: z.number(),
|
|
@@ -304,7 +312,7 @@ function Avatar({ style, props }) {
|
|
|
304
312
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
305
313
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
306
314
|
};
|
|
307
|
-
return /* @__PURE__ */
|
|
315
|
+
return /* @__PURE__ */ React62.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React62.createElement(
|
|
308
316
|
"img",
|
|
309
317
|
{
|
|
310
318
|
alt,
|
|
@@ -456,14 +464,14 @@ function Button({ style, props }) {
|
|
|
456
464
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
457
465
|
textDecoration: "none"
|
|
458
466
|
};
|
|
459
|
-
return /* @__PURE__ */
|
|
467
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React62.createElement(
|
|
460
468
|
"span",
|
|
461
469
|
{
|
|
462
470
|
dangerouslySetInnerHTML: {
|
|
463
471
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
464
472
|
}
|
|
465
473
|
}
|
|
466
|
-
), /* @__PURE__ */
|
|
474
|
+
), /* @__PURE__ */ React62.createElement("span", null, text), /* @__PURE__ */ React62.createElement(
|
|
467
475
|
"span",
|
|
468
476
|
{
|
|
469
477
|
dangerouslySetInnerHTML: {
|
|
@@ -512,7 +520,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
512
520
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
513
521
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
514
522
|
};
|
|
515
|
-
return /* @__PURE__ */
|
|
523
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wStyle }, /* @__PURE__ */ React62.createElement(
|
|
516
524
|
"table",
|
|
517
525
|
{
|
|
518
526
|
align: "center",
|
|
@@ -521,7 +529,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
521
529
|
border: 0,
|
|
522
530
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
523
531
|
},
|
|
524
|
-
/* @__PURE__ */
|
|
532
|
+
/* @__PURE__ */ React62.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React62.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React62.createElement(TableCell, { index: 2, props: blockProps, columns })))
|
|
525
533
|
));
|
|
526
534
|
}
|
|
527
535
|
function TableCell({ index, props, columns }) {
|
|
@@ -539,7 +547,7 @@ function TableCell({ index, props, columns }) {
|
|
|
539
547
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
540
548
|
};
|
|
541
549
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
542
|
-
return /* @__PURE__ */
|
|
550
|
+
return /* @__PURE__ */ React62.createElement("td", { style }, children);
|
|
543
551
|
}
|
|
544
552
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
545
553
|
if (index === 0) {
|
|
@@ -601,9 +609,9 @@ function Container({ style, children }) {
|
|
|
601
609
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
602
610
|
};
|
|
603
611
|
if (!children) {
|
|
604
|
-
return /* @__PURE__ */
|
|
612
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wStyle });
|
|
605
613
|
}
|
|
606
|
-
return /* @__PURE__ */
|
|
614
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wStyle }, children);
|
|
607
615
|
}
|
|
608
616
|
var container_default = Container;
|
|
609
617
|
var COLOR_SCHEMA5 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -637,7 +645,7 @@ function Divider({ style, props }) {
|
|
|
637
645
|
};
|
|
638
646
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
639
647
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
640
|
-
return /* @__PURE__ */
|
|
648
|
+
return /* @__PURE__ */ React62.createElement("div", { style: st }, /* @__PURE__ */ React62.createElement(
|
|
641
649
|
"hr",
|
|
642
650
|
{
|
|
643
651
|
style: {
|
|
@@ -735,11 +743,11 @@ function Heading({ props, style }) {
|
|
|
735
743
|
const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
|
|
736
744
|
switch (level) {
|
|
737
745
|
case "h1":
|
|
738
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ React62.createElement("h1", __spreadValues({}, renderProps));
|
|
739
747
|
case "h2":
|
|
740
|
-
return /* @__PURE__ */
|
|
748
|
+
return /* @__PURE__ */ React62.createElement("h2", __spreadValues({}, renderProps));
|
|
741
749
|
case "h3":
|
|
742
|
-
return /* @__PURE__ */
|
|
750
|
+
return /* @__PURE__ */ React62.createElement("h3", __spreadValues({}, renderProps));
|
|
743
751
|
}
|
|
744
752
|
}
|
|
745
753
|
function getFontSize(level) {
|
|
@@ -821,9 +829,9 @@ function Html({ style, props }) {
|
|
|
821
829
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
822
830
|
};
|
|
823
831
|
if (!children) {
|
|
824
|
-
return /* @__PURE__ */
|
|
832
|
+
return /* @__PURE__ */ React62.createElement("div", { style: cssStyle });
|
|
825
833
|
}
|
|
826
|
-
return /* @__PURE__ */
|
|
834
|
+
return /* @__PURE__ */ React62.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
827
835
|
}
|
|
828
836
|
var html_default = Html;
|
|
829
837
|
var PADDING_SCHEMA9 = z.object({
|
|
@@ -859,7 +867,7 @@ function Image({ style, props }) {
|
|
|
859
867
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
860
868
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
861
869
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
862
|
-
const imageElement = /* @__PURE__ */
|
|
870
|
+
const imageElement = /* @__PURE__ */ React62.createElement(
|
|
863
871
|
"img",
|
|
864
872
|
{
|
|
865
873
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -879,9 +887,9 @@ function Image({ style, props }) {
|
|
|
879
887
|
}
|
|
880
888
|
);
|
|
881
889
|
if (!linkHref) {
|
|
882
|
-
return /* @__PURE__ */
|
|
890
|
+
return /* @__PURE__ */ React62.createElement("div", { style: sectionStyle }, imageElement);
|
|
883
891
|
}
|
|
884
|
-
return /* @__PURE__ */
|
|
892
|
+
return /* @__PURE__ */ React62.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React62.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
885
893
|
}
|
|
886
894
|
var image_default = Image;
|
|
887
895
|
var FONT_FAMILY_SCHEMA5 = z.enum([
|
|
@@ -1027,7 +1035,7 @@ function Signature({ style, props }) {
|
|
|
1027
1035
|
color: linkColor,
|
|
1028
1036
|
textDecoration: "none"
|
|
1029
1037
|
};
|
|
1030
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
1038
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React62.createElement(
|
|
1031
1039
|
"img",
|
|
1032
1040
|
{
|
|
1033
1041
|
src: imageUrl,
|
|
@@ -1046,18 +1054,18 @@ function Signature({ style, props }) {
|
|
|
1046
1054
|
}
|
|
1047
1055
|
) : null;
|
|
1048
1056
|
const contactParts = [];
|
|
1049
|
-
if (email) contactParts.push(/* @__PURE__ */
|
|
1050
|
-
if (phone) contactParts.push(/* @__PURE__ */
|
|
1057
|
+
if (email) contactParts.push(/* @__PURE__ */ React62.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1058
|
+
if (phone) contactParts.push(/* @__PURE__ */ React62.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1051
1059
|
if (website) {
|
|
1052
1060
|
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1053
|
-
contactParts.push(/* @__PURE__ */
|
|
1061
|
+
contactParts.push(/* @__PURE__ */ React62.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1054
1062
|
}
|
|
1055
|
-
const textContent = /* @__PURE__ */
|
|
1056
|
-
const greetingElement = greeting ? /* @__PURE__ */
|
|
1063
|
+
const textContent = /* @__PURE__ */ React62.createElement("div", null, name && /* @__PURE__ */ React62.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React62.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React62.createElement(React62.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React62.createElement("span", { style: detailStyle }, " \xB7 "), part))));
|
|
1064
|
+
const greetingElement = greeting ? /* @__PURE__ */ React62.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1057
1065
|
if (layout === "vertical") {
|
|
1058
|
-
return /* @__PURE__ */
|
|
1066
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React62.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1059
1067
|
}
|
|
1060
|
-
return /* @__PURE__ */
|
|
1068
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React62.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", null, imageElement && /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
1061
1069
|
}
|
|
1062
1070
|
var signature_default = Signature;
|
|
1063
1071
|
var SpacerPropsSchema = z.object({
|
|
@@ -1074,13 +1082,13 @@ function Spacer({ props }) {
|
|
|
1074
1082
|
const style = {
|
|
1075
1083
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
1076
1084
|
};
|
|
1077
|
-
return /* @__PURE__ */
|
|
1085
|
+
return /* @__PURE__ */ React62.createElement("div", { style });
|
|
1078
1086
|
}
|
|
1079
1087
|
var spacer_default = Spacer;
|
|
1080
1088
|
function buildBlockComponent(blocks) {
|
|
1081
1089
|
return function BlockComponent({ type, data }) {
|
|
1082
1090
|
const Component = blocks[type].Component;
|
|
1083
|
-
return /* @__PURE__ */
|
|
1091
|
+
return /* @__PURE__ */ React62.createElement(Component, __spreadValues({}, data));
|
|
1084
1092
|
};
|
|
1085
1093
|
}
|
|
1086
1094
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -1101,6 +1109,38 @@ function buildBlockConfigurationDictionary(blocks) {
|
|
|
1101
1109
|
// src/core/utils.ts
|
|
1102
1110
|
var DocumentBlocksDictionary = "DocumentBlocksDictionary";
|
|
1103
1111
|
var BlockConfiguration = "BlockConfiguration";
|
|
1112
|
+
var editorHandlebars = Handlebars.create();
|
|
1113
|
+
editorHandlebars.registerHelper("formatDate", function(value, format) {
|
|
1114
|
+
if (value === null || value === void 0 || value === "") return "";
|
|
1115
|
+
const date = value instanceof Date ? value : new Date(String(value));
|
|
1116
|
+
if (Number.isNaN(date.getTime())) return String(value);
|
|
1117
|
+
const spec = typeof format === "string" ? format : void 0;
|
|
1118
|
+
if (!spec || spec === "iso") return date.toISOString();
|
|
1119
|
+
if (spec === "date") return date.toLocaleDateString();
|
|
1120
|
+
if (spec === "time") return date.toLocaleTimeString();
|
|
1121
|
+
if (spec === "datetime") return date.toLocaleString();
|
|
1122
|
+
return date.toLocaleDateString(void 0, { dateStyle: spec });
|
|
1123
|
+
});
|
|
1124
|
+
editorHandlebars.registerHelper("formatNumber", function(value, options) {
|
|
1125
|
+
if (value === null || value === void 0 || value === "") return "";
|
|
1126
|
+
const num = typeof value === "number" ? value : Number(value);
|
|
1127
|
+
if (Number.isNaN(num)) return String(value);
|
|
1128
|
+
const hashOpts = options && typeof options === "object" && "hash" in options ? options.hash : {};
|
|
1129
|
+
try {
|
|
1130
|
+
return new Intl.NumberFormat(void 0, {
|
|
1131
|
+
style: hashOpts.style,
|
|
1132
|
+
currency: hashOpts.currency,
|
|
1133
|
+
minimumFractionDigits: hashOpts.minimumFractionDigits,
|
|
1134
|
+
maximumFractionDigits: hashOpts.maximumFractionDigits
|
|
1135
|
+
}).format(num);
|
|
1136
|
+
} catch (e) {
|
|
1137
|
+
return String(num);
|
|
1138
|
+
}
|
|
1139
|
+
});
|
|
1140
|
+
function evaluateHandlebars(source, context) {
|
|
1141
|
+
const template = editorHandlebars.compile(source, { strict: false, noEscape: false });
|
|
1142
|
+
return template(context);
|
|
1143
|
+
}
|
|
1104
1144
|
var BasePropsShape = ColumnsContainerPropsSchema.shape.props.unwrap().unwrap().shape;
|
|
1105
1145
|
var ColumnsContainerPropsSchema2 = z.object({
|
|
1106
1146
|
style: ColumnsContainerPropsSchema.shape.style,
|
|
@@ -1117,9 +1157,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
1117
1157
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
1118
1158
|
let cols = void 0;
|
|
1119
1159
|
if (columns) {
|
|
1120
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1160
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1121
1161
|
}
|
|
1122
|
-
return /* @__PURE__ */
|
|
1162
|
+
return /* @__PURE__ */ React62.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
1123
1163
|
}
|
|
1124
1164
|
var ContainerPropsSchema2 = z.object({
|
|
1125
1165
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -1130,7 +1170,7 @@ var ContainerPropsSchema2 = z.object({
|
|
|
1130
1170
|
function ContainerReader({ style, props }) {
|
|
1131
1171
|
var _a;
|
|
1132
1172
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
1133
|
-
return /* @__PURE__ */
|
|
1173
|
+
return /* @__PURE__ */ React62.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1134
1174
|
}
|
|
1135
1175
|
var COLOR_SCHEMA9 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1136
1176
|
var FONT_FAMILY_SCHEMA6 = z.enum([
|
|
@@ -1203,9 +1243,9 @@ function EmailLayoutReader(props) {
|
|
|
1203
1243
|
margin: "0"
|
|
1204
1244
|
};
|
|
1205
1245
|
if (props.backdropDisabled) {
|
|
1206
|
-
return /* @__PURE__ */
|
|
1246
|
+
return /* @__PURE__ */ React62.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1207
1247
|
}
|
|
1208
|
-
return /* @__PURE__ */
|
|
1248
|
+
return /* @__PURE__ */ React62.createElement(
|
|
1209
1249
|
"div",
|
|
1210
1250
|
{
|
|
1211
1251
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
@@ -1215,7 +1255,7 @@ function EmailLayoutReader(props) {
|
|
|
1215
1255
|
width: "100%"
|
|
1216
1256
|
})
|
|
1217
1257
|
},
|
|
1218
|
-
/* @__PURE__ */
|
|
1258
|
+
/* @__PURE__ */ React62.createElement(
|
|
1219
1259
|
"table",
|
|
1220
1260
|
{
|
|
1221
1261
|
align: "center",
|
|
@@ -1233,7 +1273,7 @@ function EmailLayoutReader(props) {
|
|
|
1233
1273
|
cellPadding: "0",
|
|
1234
1274
|
border: 0
|
|
1235
1275
|
},
|
|
1236
|
-
/* @__PURE__ */
|
|
1276
|
+
/* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1237
1277
|
)
|
|
1238
1278
|
);
|
|
1239
1279
|
}
|
|
@@ -1245,7 +1285,7 @@ function useReaderDocument() {
|
|
|
1245
1285
|
}
|
|
1246
1286
|
function ReaderBlock({ id }) {
|
|
1247
1287
|
const document2 = useReaderDocument();
|
|
1248
|
-
return document2[id] ? /* @__PURE__ */
|
|
1288
|
+
return document2[id] ? /* @__PURE__ */ React62.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1249
1289
|
}
|
|
1250
1290
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1251
1291
|
ColumnsContainer: {
|
|
@@ -1302,21 +1342,25 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1302
1342
|
var ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
|
|
1303
1343
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1304
1344
|
function Reader({ document: document2, rootBlockId }) {
|
|
1305
|
-
return /* @__PURE__ */
|
|
1345
|
+
return /* @__PURE__ */ React62.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React62.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1306
1346
|
}
|
|
1307
1347
|
|
|
1308
1348
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1309
|
-
function renderToStaticMarkup(document2, { rootBlockId }) {
|
|
1310
|
-
|
|
1311
|
-
/* @__PURE__ */
|
|
1349
|
+
function renderToStaticMarkup(document2, { rootBlockId, variables }) {
|
|
1350
|
+
const html2 = "<!DOCTYPE html>" + renderToStaticMarkup$1(
|
|
1351
|
+
/* @__PURE__ */ React62.createElement("html", null, /* @__PURE__ */ React62.createElement("body", null, /* @__PURE__ */ React62.createElement(Reader, { document: document2, rootBlockId })))
|
|
1312
1352
|
);
|
|
1353
|
+
if (!variables) return html2;
|
|
1354
|
+
return evaluateHandlebars(html2, variables);
|
|
1313
1355
|
}
|
|
1314
1356
|
|
|
1315
1357
|
// src/email-builder/renderers/render-to-text.ts
|
|
1316
|
-
function renderToText(document2, { rootBlockId }) {
|
|
1358
|
+
function renderToText(document2, { rootBlockId, variables }) {
|
|
1317
1359
|
const lines = [];
|
|
1318
1360
|
renderBlock(document2, rootBlockId, lines);
|
|
1319
|
-
|
|
1361
|
+
const text = lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
|
|
1362
|
+
if (!variables) return text;
|
|
1363
|
+
return evaluateHandlebars(text, variables);
|
|
1320
1364
|
}
|
|
1321
1365
|
function renderBlock(document2, blockId, lines) {
|
|
1322
1366
|
var _a;
|
|
@@ -1977,7 +2021,10 @@ var editorStateStore = create(() => ({
|
|
|
1977
2021
|
inspectorDrawerOpen: true,
|
|
1978
2022
|
samplesDrawerOpen: true,
|
|
1979
2023
|
persistenceEnabled: false,
|
|
1980
|
-
lastFocusedEditable: null
|
|
2024
|
+
lastFocusedEditable: null,
|
|
2025
|
+
hoveredBlockId: null,
|
|
2026
|
+
draggingBlock: null,
|
|
2027
|
+
workspaceBackground: "checkerboard"
|
|
1981
2028
|
}));
|
|
1982
2029
|
function useDocument() {
|
|
1983
2030
|
return editorStateStore((s) => s.document);
|
|
@@ -2056,6 +2103,27 @@ function useLastFocusedEditable() {
|
|
|
2056
2103
|
function getLastFocusedEditable() {
|
|
2057
2104
|
return editorStateStore.getState().lastFocusedEditable;
|
|
2058
2105
|
}
|
|
2106
|
+
function useHoveredBlockId() {
|
|
2107
|
+
return editorStateStore((s) => s.hoveredBlockId);
|
|
2108
|
+
}
|
|
2109
|
+
function setHoveredBlockId(hoveredBlockId) {
|
|
2110
|
+
return editorStateStore.setState({ hoveredBlockId });
|
|
2111
|
+
}
|
|
2112
|
+
function useDraggingBlock() {
|
|
2113
|
+
return editorStateStore((s) => s.draggingBlock);
|
|
2114
|
+
}
|
|
2115
|
+
function getDraggingBlock() {
|
|
2116
|
+
return editorStateStore.getState().draggingBlock;
|
|
2117
|
+
}
|
|
2118
|
+
function setDraggingBlock(draggingBlock) {
|
|
2119
|
+
return editorStateStore.setState({ draggingBlock });
|
|
2120
|
+
}
|
|
2121
|
+
function useWorkspaceBackground() {
|
|
2122
|
+
return editorStateStore((s) => s.workspaceBackground);
|
|
2123
|
+
}
|
|
2124
|
+
function setWorkspaceBackground(workspaceBackground) {
|
|
2125
|
+
return editorStateStore.setState({ workspaceBackground });
|
|
2126
|
+
}
|
|
2059
2127
|
function setLastFocusedEditable(lastFocusedEditable) {
|
|
2060
2128
|
return editorStateStore.setState({ lastFocusedEditable });
|
|
2061
2129
|
}
|
|
@@ -2130,7 +2198,7 @@ var EmailEditorProvider = ({
|
|
|
2130
2198
|
registerSaveListener,
|
|
2131
2199
|
setCurrentTemplate
|
|
2132
2200
|
}), [currentTemplateId, currentTemplateName, currentTemplateKind, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
|
|
2133
|
-
return /* @__PURE__ */
|
|
2201
|
+
return /* @__PURE__ */ React62.createElement(EmailEditorContext.Provider, { value }, children);
|
|
2134
2202
|
};
|
|
2135
2203
|
var useEmailEditor = () => {
|
|
2136
2204
|
const context = useContext(EmailEditorContext);
|
|
@@ -2144,20 +2212,20 @@ function ImageCallbacksProvider({
|
|
|
2144
2212
|
callbacks,
|
|
2145
2213
|
children
|
|
2146
2214
|
}) {
|
|
2147
|
-
return /* @__PURE__ */
|
|
2215
|
+
return /* @__PURE__ */ React62.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
|
|
2148
2216
|
}
|
|
2149
2217
|
function useImageCallbacks() {
|
|
2150
2218
|
return useContext(ImageCallbacksContext);
|
|
2151
2219
|
}
|
|
2152
2220
|
function BaseSidebarPanel({ title, children }) {
|
|
2153
|
-
return /* @__PURE__ */
|
|
2221
|
+
return /* @__PURE__ */ React62.createElement(Box, { p: 2 }, /* @__PURE__ */ React62.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React62.createElement(Stack, { spacing: 5, mb: 3 }, children));
|
|
2154
2222
|
}
|
|
2155
2223
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
2156
2224
|
const [value, setValue] = useState(defaultValue);
|
|
2157
2225
|
useEffect(() => {
|
|
2158
2226
|
setValue(defaultValue);
|
|
2159
2227
|
}, [defaultValue]);
|
|
2160
|
-
return /* @__PURE__ */
|
|
2228
|
+
return /* @__PURE__ */ React62.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
|
|
2161
2229
|
ToggleButtonGroup,
|
|
2162
2230
|
{
|
|
2163
2231
|
exclusive: true,
|
|
@@ -2177,7 +2245,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
2177
2245
|
}
|
|
2178
2246
|
function RawSliderInput(_a) {
|
|
2179
2247
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
2180
|
-
return /* @__PURE__ */
|
|
2248
|
+
return /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React62.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React62.createElement(
|
|
2181
2249
|
Slider,
|
|
2182
2250
|
__spreadProps(__spreadValues({}, props), {
|
|
2183
2251
|
value,
|
|
@@ -2188,14 +2256,14 @@ function RawSliderInput(_a) {
|
|
|
2188
2256
|
setValue(value2);
|
|
2189
2257
|
}
|
|
2190
2258
|
})
|
|
2191
|
-
), /* @__PURE__ */
|
|
2259
|
+
), /* @__PURE__ */ React62.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
2192
2260
|
}
|
|
2193
2261
|
|
|
2194
2262
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
2195
2263
|
function SliderInput(_a) {
|
|
2196
2264
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
2197
2265
|
const [value, setValue] = useState(defaultValue);
|
|
2198
|
-
return /* @__PURE__ */
|
|
2266
|
+
return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
|
|
2199
2267
|
RawSliderInput,
|
|
2200
2268
|
__spreadValues({
|
|
2201
2269
|
value,
|
|
@@ -2212,7 +2280,7 @@ function TextInput({ helperText, label, placeholder, rows, InputProps: InputProp
|
|
|
2212
2280
|
useEffect(() => {
|
|
2213
2281
|
setValue(defaultValue);
|
|
2214
2282
|
}, [defaultValue]);
|
|
2215
|
-
return /* @__PURE__ */
|
|
2283
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2216
2284
|
TextField,
|
|
2217
2285
|
{
|
|
2218
2286
|
fullWidth: true,
|
|
@@ -2238,7 +2306,7 @@ var TILE_BUTTON = {
|
|
|
2238
2306
|
};
|
|
2239
2307
|
function Swatch({ paletteColors, value, onChange }) {
|
|
2240
2308
|
const renderButton2 = (colorValue) => {
|
|
2241
|
-
return /* @__PURE__ */
|
|
2309
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2242
2310
|
Button$1,
|
|
2243
2311
|
{
|
|
2244
2312
|
key: colorValue,
|
|
@@ -2257,7 +2325,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
2257
2325
|
}
|
|
2258
2326
|
);
|
|
2259
2327
|
};
|
|
2260
|
-
return /* @__PURE__ */
|
|
2328
|
+
return /* @__PURE__ */ React62.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
|
|
2261
2329
|
}
|
|
2262
2330
|
|
|
2263
2331
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2324,7 +2392,7 @@ var SX = {
|
|
|
2324
2392
|
}
|
|
2325
2393
|
};
|
|
2326
2394
|
function Picker({ value, onChange }) {
|
|
2327
|
-
return /* @__PURE__ */
|
|
2395
|
+
return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React62.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React62.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React62.createElement(Box, { pt: 1 }, /* @__PURE__ */ React62.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
|
|
2328
2396
|
}
|
|
2329
2397
|
|
|
2330
2398
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2349,7 +2417,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2349
2417
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2350
2418
|
return null;
|
|
2351
2419
|
}
|
|
2352
|
-
return /* @__PURE__ */
|
|
2420
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2353
2421
|
ButtonBase,
|
|
2354
2422
|
{
|
|
2355
2423
|
onClick: () => {
|
|
@@ -2357,16 +2425,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2357
2425
|
onChange(null);
|
|
2358
2426
|
}
|
|
2359
2427
|
},
|
|
2360
|
-
/* @__PURE__ */
|
|
2428
|
+
/* @__PURE__ */ React62.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2361
2429
|
);
|
|
2362
2430
|
};
|
|
2363
2431
|
const renderOpenButton = () => {
|
|
2364
2432
|
if (value) {
|
|
2365
|
-
return /* @__PURE__ */
|
|
2433
|
+
return /* @__PURE__ */ React62.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2366
2434
|
}
|
|
2367
|
-
return /* @__PURE__ */
|
|
2435
|
+
return /* @__PURE__ */ React62.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" }));
|
|
2368
2436
|
};
|
|
2369
|
-
return /* @__PURE__ */
|
|
2437
|
+
return /* @__PURE__ */ React62.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React62.createElement(
|
|
2370
2438
|
Menu,
|
|
2371
2439
|
{
|
|
2372
2440
|
anchorEl,
|
|
@@ -2376,7 +2444,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2376
2444
|
sx: { height: "auto", padding: 0 }
|
|
2377
2445
|
}
|
|
2378
2446
|
},
|
|
2379
|
-
/* @__PURE__ */
|
|
2447
|
+
/* @__PURE__ */ React62.createElement(
|
|
2380
2448
|
Picker,
|
|
2381
2449
|
{
|
|
2382
2450
|
value: value || "",
|
|
@@ -2391,10 +2459,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2391
2459
|
|
|
2392
2460
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2393
2461
|
function ColorInput2(props) {
|
|
2394
|
-
return /* @__PURE__ */
|
|
2462
|
+
return /* @__PURE__ */ React62.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2395
2463
|
}
|
|
2396
2464
|
function NullableColorInput(props) {
|
|
2397
|
-
return /* @__PURE__ */
|
|
2465
|
+
return /* @__PURE__ */ React62.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2398
2466
|
}
|
|
2399
2467
|
|
|
2400
2468
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2447,13 +2515,13 @@ var FONT_FAMILIES = [
|
|
|
2447
2515
|
];
|
|
2448
2516
|
|
|
2449
2517
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2450
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2518
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React62.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2451
2519
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2452
2520
|
const [value, setValue] = useState(defaultValue != null ? defaultValue : "inherit");
|
|
2453
2521
|
useEffect(() => {
|
|
2454
2522
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2455
2523
|
}, [defaultValue]);
|
|
2456
|
-
return /* @__PURE__ */
|
|
2524
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2457
2525
|
TextField,
|
|
2458
2526
|
{
|
|
2459
2527
|
select: true,
|
|
@@ -2466,7 +2534,7 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2466
2534
|
onChange(v === null ? null : v);
|
|
2467
2535
|
}
|
|
2468
2536
|
},
|
|
2469
|
-
/* @__PURE__ */
|
|
2537
|
+
/* @__PURE__ */ React62.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2470
2538
|
OPTIONS
|
|
2471
2539
|
);
|
|
2472
2540
|
}
|
|
@@ -2479,10 +2547,10 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2479
2547
|
setValue(value2);
|
|
2480
2548
|
onChange(value2);
|
|
2481
2549
|
};
|
|
2482
|
-
return /* @__PURE__ */
|
|
2550
|
+
return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
|
|
2483
2551
|
RawSliderInput,
|
|
2484
2552
|
{
|
|
2485
|
-
iconLabel: /* @__PURE__ */
|
|
2553
|
+
iconLabel: /* @__PURE__ */ React62.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2486
2554
|
value,
|
|
2487
2555
|
setValue: handleChange,
|
|
2488
2556
|
units: "px",
|
|
@@ -2497,7 +2565,7 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2497
2565
|
useEffect(() => {
|
|
2498
2566
|
setValue(defaultValue);
|
|
2499
2567
|
}, [defaultValue]);
|
|
2500
|
-
return /* @__PURE__ */
|
|
2568
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2501
2569
|
RadioGroupInput,
|
|
2502
2570
|
{
|
|
2503
2571
|
label,
|
|
@@ -2507,8 +2575,8 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2507
2575
|
onChange(fontWeight);
|
|
2508
2576
|
}
|
|
2509
2577
|
},
|
|
2510
|
-
/* @__PURE__ */
|
|
2511
|
-
/* @__PURE__ */
|
|
2578
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "normal" }, "Regular"),
|
|
2579
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "bold" }, "Bold")
|
|
2512
2580
|
);
|
|
2513
2581
|
}
|
|
2514
2582
|
function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
@@ -2520,10 +2588,10 @@ function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
|
2520
2588
|
setValue(v);
|
|
2521
2589
|
onChange(v === 0 ? null : v);
|
|
2522
2590
|
};
|
|
2523
|
-
return /* @__PURE__ */
|
|
2591
|
+
return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
|
|
2524
2592
|
RawSliderInput,
|
|
2525
2593
|
{
|
|
2526
|
-
iconLabel: /* @__PURE__ */
|
|
2594
|
+
iconLabel: /* @__PURE__ */ React62.createElement(SpaceBarOutlined, { sx: { fontSize: 16 } }),
|
|
2527
2595
|
value,
|
|
2528
2596
|
setValue: handleChange,
|
|
2529
2597
|
units: "px",
|
|
@@ -2542,10 +2610,10 @@ function LineHeightInput({ label, defaultValue, onChange }) {
|
|
|
2542
2610
|
setValue(v);
|
|
2543
2611
|
onChange(v === 0 ? null : v);
|
|
2544
2612
|
};
|
|
2545
|
-
return /* @__PURE__ */
|
|
2613
|
+
return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
|
|
2546
2614
|
RawSliderInput,
|
|
2547
2615
|
{
|
|
2548
|
-
iconLabel: /* @__PURE__ */
|
|
2616
|
+
iconLabel: /* @__PURE__ */ React62.createElement(FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
|
|
2549
2617
|
value,
|
|
2550
2618
|
setValue: handleChange,
|
|
2551
2619
|
units: "",
|
|
@@ -2574,10 +2642,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2574
2642
|
setValue(v);
|
|
2575
2643
|
onChange(v);
|
|
2576
2644
|
}
|
|
2577
|
-
return /* @__PURE__ */
|
|
2645
|
+
return /* @__PURE__ */ React62.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
|
|
2578
2646
|
RawSliderInput,
|
|
2579
2647
|
{
|
|
2580
|
-
iconLabel: /* @__PURE__ */
|
|
2648
|
+
iconLabel: /* @__PURE__ */ React62.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2581
2649
|
value: value.top,
|
|
2582
2650
|
setValue: (num) => handleChange("top", num),
|
|
2583
2651
|
units: "px",
|
|
@@ -2586,10 +2654,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2586
2654
|
max: 80,
|
|
2587
2655
|
marks: true
|
|
2588
2656
|
}
|
|
2589
|
-
), /* @__PURE__ */
|
|
2657
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2590
2658
|
RawSliderInput,
|
|
2591
2659
|
{
|
|
2592
|
-
iconLabel: /* @__PURE__ */
|
|
2660
|
+
iconLabel: /* @__PURE__ */ React62.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2593
2661
|
value: value.bottom,
|
|
2594
2662
|
setValue: (num) => handleChange("bottom", num),
|
|
2595
2663
|
units: "px",
|
|
@@ -2598,10 +2666,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2598
2666
|
max: 80,
|
|
2599
2667
|
marks: true
|
|
2600
2668
|
}
|
|
2601
|
-
), /* @__PURE__ */
|
|
2669
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2602
2670
|
RawSliderInput,
|
|
2603
2671
|
{
|
|
2604
|
-
iconLabel: /* @__PURE__ */
|
|
2672
|
+
iconLabel: /* @__PURE__ */ React62.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2605
2673
|
value: value.left,
|
|
2606
2674
|
setValue: (num) => handleChange("left", num),
|
|
2607
2675
|
units: "px",
|
|
@@ -2610,10 +2678,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2610
2678
|
max: 80,
|
|
2611
2679
|
marks: true
|
|
2612
2680
|
}
|
|
2613
|
-
), /* @__PURE__ */
|
|
2681
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2614
2682
|
RawSliderInput,
|
|
2615
2683
|
{
|
|
2616
|
-
iconLabel: /* @__PURE__ */
|
|
2684
|
+
iconLabel: /* @__PURE__ */ React62.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2617
2685
|
value: value.right,
|
|
2618
2686
|
setValue: (num) => handleChange("right", num),
|
|
2619
2687
|
units: "px",
|
|
@@ -2629,7 +2697,7 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2629
2697
|
useEffect(() => {
|
|
2630
2698
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2631
2699
|
}, [defaultValue]);
|
|
2632
|
-
return /* @__PURE__ */
|
|
2700
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2633
2701
|
RadioGroupInput,
|
|
2634
2702
|
{
|
|
2635
2703
|
label,
|
|
@@ -2639,9 +2707,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2639
2707
|
onChange(value2);
|
|
2640
2708
|
}
|
|
2641
2709
|
},
|
|
2642
|
-
/* @__PURE__ */
|
|
2643
|
-
/* @__PURE__ */
|
|
2644
|
-
/* @__PURE__ */
|
|
2710
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React62.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2711
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React62.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2712
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React62.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2645
2713
|
);
|
|
2646
2714
|
}
|
|
2647
2715
|
|
|
@@ -2654,14 +2722,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2654
2722
|
};
|
|
2655
2723
|
switch (name) {
|
|
2656
2724
|
case "backgroundColor":
|
|
2657
|
-
return /* @__PURE__ */
|
|
2725
|
+
return /* @__PURE__ */ React62.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
|
|
2658
2726
|
case "borderColor":
|
|
2659
|
-
return /* @__PURE__ */
|
|
2727
|
+
return /* @__PURE__ */ React62.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
|
|
2660
2728
|
case "borderRadius":
|
|
2661
|
-
return /* @__PURE__ */
|
|
2729
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2662
2730
|
SliderInput,
|
|
2663
2731
|
{
|
|
2664
|
-
iconLabel: /* @__PURE__ */
|
|
2732
|
+
iconLabel: /* @__PURE__ */ React62.createElement(RoundedCornerOutlined, null),
|
|
2665
2733
|
units: "px",
|
|
2666
2734
|
step: 4,
|
|
2667
2735
|
marks: true,
|
|
@@ -2673,27 +2741,27 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2673
2741
|
}
|
|
2674
2742
|
);
|
|
2675
2743
|
case "color":
|
|
2676
|
-
return /* @__PURE__ */
|
|
2744
|
+
return /* @__PURE__ */ React62.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
|
|
2677
2745
|
case "fontFamily":
|
|
2678
|
-
return /* @__PURE__ */
|
|
2746
|
+
return /* @__PURE__ */ React62.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
|
|
2679
2747
|
case "fontSize":
|
|
2680
|
-
return /* @__PURE__ */
|
|
2748
|
+
return /* @__PURE__ */ React62.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
|
|
2681
2749
|
case "fontWeight":
|
|
2682
|
-
return /* @__PURE__ */
|
|
2750
|
+
return /* @__PURE__ */ React62.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
|
|
2683
2751
|
case "lineHeight":
|
|
2684
|
-
return /* @__PURE__ */
|
|
2752
|
+
return /* @__PURE__ */ React62.createElement(LineHeightInput, { label: "Line height", defaultValue, onChange: handleChange });
|
|
2685
2753
|
case "letterSpacing":
|
|
2686
|
-
return /* @__PURE__ */
|
|
2754
|
+
return /* @__PURE__ */ React62.createElement(LetterSpacingInput, { label: "Letter spacing", defaultValue, onChange: handleChange });
|
|
2687
2755
|
case "textAlign":
|
|
2688
|
-
return /* @__PURE__ */
|
|
2756
|
+
return /* @__PURE__ */ React62.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
|
|
2689
2757
|
case "padding":
|
|
2690
|
-
return /* @__PURE__ */
|
|
2758
|
+
return /* @__PURE__ */ React62.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
|
|
2691
2759
|
}
|
|
2692
2760
|
}
|
|
2693
2761
|
|
|
2694
2762
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2695
2763
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2696
|
-
return /* @__PURE__ */
|
|
2764
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, names.map((name) => /* @__PURE__ */ React62.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2697
2765
|
}
|
|
2698
2766
|
|
|
2699
2767
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
@@ -2713,11 +2781,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2713
2781
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2714
2782
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2715
2783
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2716
|
-
return /* @__PURE__ */
|
|
2784
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React62.createElement(
|
|
2717
2785
|
SliderInput,
|
|
2718
2786
|
{
|
|
2719
2787
|
label: "Size",
|
|
2720
|
-
iconLabel: /* @__PURE__ */
|
|
2788
|
+
iconLabel: /* @__PURE__ */ React62.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2721
2789
|
units: "px",
|
|
2722
2790
|
step: 3,
|
|
2723
2791
|
min: 32,
|
|
@@ -2727,7 +2795,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2727
2795
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2728
2796
|
}
|
|
2729
2797
|
}
|
|
2730
|
-
), /* @__PURE__ */
|
|
2798
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2731
2799
|
RadioGroupInput,
|
|
2732
2800
|
{
|
|
2733
2801
|
label: "Shape",
|
|
@@ -2736,10 +2804,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2736
2804
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2737
2805
|
}
|
|
2738
2806
|
},
|
|
2739
|
-
/* @__PURE__ */
|
|
2740
|
-
/* @__PURE__ */
|
|
2741
|
-
/* @__PURE__ */
|
|
2742
|
-
), /* @__PURE__ */
|
|
2807
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "circle" }, "Circle"),
|
|
2808
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "square" }, "Square"),
|
|
2809
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "rounded" }, "Rounded")
|
|
2810
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2743
2811
|
TextInput,
|
|
2744
2812
|
{
|
|
2745
2813
|
label: "Image URL",
|
|
@@ -2748,7 +2816,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2748
2816
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2749
2817
|
}
|
|
2750
2818
|
}
|
|
2751
|
-
), /* @__PURE__ */
|
|
2819
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2752
2820
|
TextInput,
|
|
2753
2821
|
{
|
|
2754
2822
|
label: "Alt text",
|
|
@@ -2757,7 +2825,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2757
2825
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2758
2826
|
}
|
|
2759
2827
|
}
|
|
2760
|
-
), /* @__PURE__ */
|
|
2828
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2761
2829
|
MultiStylePropertyPanel,
|
|
2762
2830
|
{
|
|
2763
2831
|
names: ["textAlign", "padding"],
|
|
@@ -2785,65 +2853,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2785
2853
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2786
2854
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2787
2855
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2788
|
-
return /* @__PURE__ */
|
|
2856
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React62.createElement(
|
|
2789
2857
|
TextInput,
|
|
2790
2858
|
{
|
|
2791
2859
|
label: "Text",
|
|
2792
2860
|
defaultValue: text,
|
|
2793
2861
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2794
2862
|
}
|
|
2795
|
-
), /* @__PURE__ */
|
|
2863
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2796
2864
|
TextInput,
|
|
2797
2865
|
{
|
|
2798
2866
|
label: "Url",
|
|
2799
2867
|
defaultValue: url,
|
|
2800
2868
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2801
2869
|
}
|
|
2802
|
-
), /* @__PURE__ */
|
|
2870
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2803
2871
|
RadioGroupInput,
|
|
2804
2872
|
{
|
|
2805
2873
|
label: "Width",
|
|
2806
2874
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2807
2875
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2808
2876
|
},
|
|
2809
|
-
/* @__PURE__ */
|
|
2810
|
-
/* @__PURE__ */
|
|
2811
|
-
), /* @__PURE__ */
|
|
2877
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
|
|
2878
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "AUTO" }, "Auto")
|
|
2879
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2812
2880
|
RadioGroupInput,
|
|
2813
2881
|
{
|
|
2814
2882
|
label: "Size",
|
|
2815
2883
|
defaultValue: size,
|
|
2816
2884
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2817
2885
|
},
|
|
2818
|
-
/* @__PURE__ */
|
|
2819
|
-
/* @__PURE__ */
|
|
2820
|
-
/* @__PURE__ */
|
|
2821
|
-
/* @__PURE__ */
|
|
2822
|
-
), /* @__PURE__ */
|
|
2886
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "x-small" }, "Xs"),
|
|
2887
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "small" }, "Sm"),
|
|
2888
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "medium" }, "Md"),
|
|
2889
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "large" }, "Lg")
|
|
2890
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2823
2891
|
RadioGroupInput,
|
|
2824
2892
|
{
|
|
2825
2893
|
label: "Style",
|
|
2826
2894
|
defaultValue: buttonStyle,
|
|
2827
2895
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2828
2896
|
},
|
|
2829
|
-
/* @__PURE__ */
|
|
2830
|
-
/* @__PURE__ */
|
|
2831
|
-
/* @__PURE__ */
|
|
2832
|
-
), /* @__PURE__ */
|
|
2897
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
|
|
2898
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
|
|
2899
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "pill" }, "Pill")
|
|
2900
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2833
2901
|
ColorInput2,
|
|
2834
2902
|
{
|
|
2835
2903
|
label: "Text color",
|
|
2836
2904
|
defaultValue: buttonTextColor,
|
|
2837
2905
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2838
2906
|
}
|
|
2839
|
-
), /* @__PURE__ */
|
|
2907
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2840
2908
|
ColorInput2,
|
|
2841
2909
|
{
|
|
2842
2910
|
label: "Button color",
|
|
2843
2911
|
defaultValue: buttonBackgroundColor,
|
|
2844
2912
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2845
2913
|
}
|
|
2846
|
-
), /* @__PURE__ */
|
|
2914
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2847
2915
|
MultiStylePropertyPanel,
|
|
2848
2916
|
{
|
|
2849
2917
|
names: [
|
|
@@ -2878,7 +2946,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2878
2946
|
const value = parseInt(ev.target.value);
|
|
2879
2947
|
onChange(isNaN(value) ? null : value);
|
|
2880
2948
|
};
|
|
2881
|
-
return /* @__PURE__ */
|
|
2949
|
+
return /* @__PURE__ */ React62.createElement(
|
|
2882
2950
|
TextField,
|
|
2883
2951
|
{
|
|
2884
2952
|
fullWidth: true,
|
|
@@ -2889,7 +2957,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2889
2957
|
placeholder: "auto",
|
|
2890
2958
|
size: "small",
|
|
2891
2959
|
InputProps: {
|
|
2892
|
-
endAdornment: /* @__PURE__ */
|
|
2960
|
+
endAdornment: /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2893
2961
|
}
|
|
2894
2962
|
}
|
|
2895
2963
|
);
|
|
@@ -2911,7 +2979,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2911
2979
|
};
|
|
2912
2980
|
let column3 = null;
|
|
2913
2981
|
{
|
|
2914
|
-
column3 = /* @__PURE__ */
|
|
2982
|
+
column3 = /* @__PURE__ */ React62.createElement(
|
|
2915
2983
|
TextDimensionInput,
|
|
2916
2984
|
{
|
|
2917
2985
|
label: "Column 3",
|
|
@@ -2922,7 +2990,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2922
2990
|
}
|
|
2923
2991
|
);
|
|
2924
2992
|
}
|
|
2925
|
-
return /* @__PURE__ */
|
|
2993
|
+
return /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React62.createElement(
|
|
2926
2994
|
TextDimensionInput,
|
|
2927
2995
|
{
|
|
2928
2996
|
label: "Column 1",
|
|
@@ -2931,7 +2999,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2931
2999
|
setIndexValue(0, v);
|
|
2932
3000
|
}
|
|
2933
3001
|
}
|
|
2934
|
-
), /* @__PURE__ */
|
|
3002
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2935
3003
|
TextDimensionInput,
|
|
2936
3004
|
{
|
|
2937
3005
|
label: "Column 2",
|
|
@@ -2956,7 +3024,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2956
3024
|
setErrors(res.error);
|
|
2957
3025
|
}
|
|
2958
3026
|
};
|
|
2959
|
-
return /* @__PURE__ */
|
|
3027
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React62.createElement(
|
|
2960
3028
|
RadioGroupInput,
|
|
2961
3029
|
{
|
|
2962
3030
|
label: "Number of columns",
|
|
@@ -2965,9 +3033,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2965
3033
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
2966
3034
|
}
|
|
2967
3035
|
},
|
|
2968
|
-
/* @__PURE__ */
|
|
2969
|
-
/* @__PURE__ */
|
|
2970
|
-
), /* @__PURE__ */
|
|
3036
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "2" }, "2"),
|
|
3037
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "3" }, "3")
|
|
3038
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2971
3039
|
ColumnWidthsInput,
|
|
2972
3040
|
{
|
|
2973
3041
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -2975,11 +3043,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2975
3043
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
2976
3044
|
}
|
|
2977
3045
|
}
|
|
2978
|
-
), /* @__PURE__ */
|
|
3046
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2979
3047
|
SliderInput,
|
|
2980
3048
|
{
|
|
2981
3049
|
label: "Columns gap",
|
|
2982
|
-
iconLabel: /* @__PURE__ */
|
|
3050
|
+
iconLabel: /* @__PURE__ */ React62.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
2983
3051
|
units: "px",
|
|
2984
3052
|
step: 4,
|
|
2985
3053
|
marks: true,
|
|
@@ -2988,7 +3056,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2988
3056
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
2989
3057
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
2990
3058
|
}
|
|
2991
|
-
), /* @__PURE__ */
|
|
3059
|
+
), /* @__PURE__ */ React62.createElement(
|
|
2992
3060
|
RadioGroupInput,
|
|
2993
3061
|
{
|
|
2994
3062
|
label: "Alignment",
|
|
@@ -2997,10 +3065,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2997
3065
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
2998
3066
|
}
|
|
2999
3067
|
},
|
|
3000
|
-
/* @__PURE__ */
|
|
3001
|
-
/* @__PURE__ */
|
|
3002
|
-
/* @__PURE__ */
|
|
3003
|
-
), /* @__PURE__ */
|
|
3068
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React62.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3069
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React62.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3070
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React62.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3071
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3004
3072
|
MultiStylePropertyPanel,
|
|
3005
3073
|
{
|
|
3006
3074
|
names: ["backgroundColor", "padding"],
|
|
@@ -3029,7 +3097,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3029
3097
|
setErrors(res.error);
|
|
3030
3098
|
}
|
|
3031
3099
|
};
|
|
3032
|
-
return /* @__PURE__ */
|
|
3100
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React62.createElement(
|
|
3033
3101
|
MultiStylePropertyPanel,
|
|
3034
3102
|
{
|
|
3035
3103
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -3052,18 +3120,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3052
3120
|
};
|
|
3053
3121
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
3054
3122
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
3055
|
-
return /* @__PURE__ */
|
|
3123
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React62.createElement(
|
|
3056
3124
|
ColorInput2,
|
|
3057
3125
|
{
|
|
3058
3126
|
label: "Color",
|
|
3059
3127
|
defaultValue: lineColor,
|
|
3060
3128
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
3061
3129
|
}
|
|
3062
|
-
), /* @__PURE__ */
|
|
3130
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3063
3131
|
SliderInput,
|
|
3064
3132
|
{
|
|
3065
3133
|
label: "Height",
|
|
3066
|
-
iconLabel: /* @__PURE__ */
|
|
3134
|
+
iconLabel: /* @__PURE__ */ React62.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3067
3135
|
units: "px",
|
|
3068
3136
|
step: 1,
|
|
3069
3137
|
min: 1,
|
|
@@ -3071,7 +3139,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3071
3139
|
defaultValue: lineHeight,
|
|
3072
3140
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
3073
3141
|
}
|
|
3074
|
-
), /* @__PURE__ */
|
|
3142
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3075
3143
|
MultiStylePropertyPanel,
|
|
3076
3144
|
{
|
|
3077
3145
|
names: ["backgroundColor", "padding"],
|
|
@@ -3115,11 +3183,11 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3115
3183
|
useEffect(() => {
|
|
3116
3184
|
setValue(defaultValue);
|
|
3117
3185
|
}, [defaultValue]);
|
|
3118
|
-
return /* @__PURE__ */
|
|
3186
|
+
return /* @__PURE__ */ React62.createElement(
|
|
3119
3187
|
FormControlLabel,
|
|
3120
3188
|
{
|
|
3121
3189
|
label,
|
|
3122
|
-
control: /* @__PURE__ */
|
|
3190
|
+
control: /* @__PURE__ */ React62.createElement(
|
|
3123
3191
|
Switch,
|
|
3124
3192
|
{
|
|
3125
3193
|
checked: value,
|
|
@@ -3147,38 +3215,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3147
3215
|
}
|
|
3148
3216
|
};
|
|
3149
3217
|
const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
|
|
3150
|
-
return /* @__PURE__ */
|
|
3218
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React62.createElement(
|
|
3151
3219
|
BooleanInput,
|
|
3152
3220
|
{
|
|
3153
3221
|
label: "Disable backdrop",
|
|
3154
3222
|
defaultValue: backdropDisabled,
|
|
3155
3223
|
onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
|
|
3156
3224
|
}
|
|
3157
|
-
), !backdropDisabled && /* @__PURE__ */
|
|
3225
|
+
), !backdropDisabled && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
3158
3226
|
ColorInput2,
|
|
3159
3227
|
{
|
|
3160
3228
|
label: "Backdrop color",
|
|
3161
3229
|
defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
|
|
3162
3230
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
3163
3231
|
}
|
|
3164
|
-
), /* @__PURE__ */
|
|
3232
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3165
3233
|
ColorInput2,
|
|
3166
3234
|
{
|
|
3167
3235
|
label: "Canvas color",
|
|
3168
3236
|
defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
|
|
3169
3237
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
3170
3238
|
}
|
|
3171
|
-
), /* @__PURE__ */
|
|
3239
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3172
3240
|
NullableColorInput,
|
|
3173
3241
|
{
|
|
3174
3242
|
label: "Canvas border color",
|
|
3175
3243
|
defaultValue: (_d = data.borderColor) != null ? _d : null,
|
|
3176
3244
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
3177
3245
|
}
|
|
3178
|
-
), /* @__PURE__ */
|
|
3246
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3179
3247
|
SliderInput,
|
|
3180
3248
|
{
|
|
3181
|
-
iconLabel: /* @__PURE__ */
|
|
3249
|
+
iconLabel: /* @__PURE__ */ React62.createElement(RoundedCornerOutlined, null),
|
|
3182
3250
|
units: "px",
|
|
3183
3251
|
step: 4,
|
|
3184
3252
|
marks: true,
|
|
@@ -3188,14 +3256,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3188
3256
|
defaultValue: (_e = data.borderRadius) != null ? _e : 0,
|
|
3189
3257
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
3190
3258
|
}
|
|
3191
|
-
)), /* @__PURE__ */
|
|
3259
|
+
)), /* @__PURE__ */ React62.createElement(
|
|
3192
3260
|
NullableFontFamily,
|
|
3193
3261
|
{
|
|
3194
3262
|
label: "Font family",
|
|
3195
3263
|
defaultValue: "MODERN_SANS",
|
|
3196
3264
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
3197
3265
|
}
|
|
3198
|
-
), /* @__PURE__ */
|
|
3266
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3199
3267
|
ColorInput2,
|
|
3200
3268
|
{
|
|
3201
3269
|
label: "Text color",
|
|
@@ -3216,7 +3284,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3216
3284
|
setErrors(res.error);
|
|
3217
3285
|
}
|
|
3218
3286
|
};
|
|
3219
|
-
return /* @__PURE__ */
|
|
3287
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React62.createElement(
|
|
3220
3288
|
TextInput,
|
|
3221
3289
|
{
|
|
3222
3290
|
label: "Content",
|
|
@@ -3226,7 +3294,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3226
3294
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
3227
3295
|
}
|
|
3228
3296
|
}
|
|
3229
|
-
), /* @__PURE__ */
|
|
3297
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3230
3298
|
RadioGroupInput,
|
|
3231
3299
|
{
|
|
3232
3300
|
label: "Level",
|
|
@@ -3235,10 +3303,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3235
3303
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
3236
3304
|
}
|
|
3237
3305
|
},
|
|
3238
|
-
/* @__PURE__ */
|
|
3239
|
-
/* @__PURE__ */
|
|
3240
|
-
/* @__PURE__ */
|
|
3241
|
-
), /* @__PURE__ */
|
|
3306
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "h1" }, "H1"),
|
|
3307
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "h2" }, "H2"),
|
|
3308
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "h3" }, "H3")
|
|
3309
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3242
3310
|
MultiStylePropertyPanel,
|
|
3243
3311
|
{
|
|
3244
3312
|
names: [
|
|
@@ -3268,7 +3336,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3268
3336
|
setErrors(res.error);
|
|
3269
3337
|
}
|
|
3270
3338
|
};
|
|
3271
|
-
return /* @__PURE__ */
|
|
3339
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React62.createElement(
|
|
3272
3340
|
TextInput,
|
|
3273
3341
|
{
|
|
3274
3342
|
label: "Content",
|
|
@@ -3276,7 +3344,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3276
3344
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
3277
3345
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
3278
3346
|
}
|
|
3279
|
-
), /* @__PURE__ */
|
|
3347
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3280
3348
|
MultiStylePropertyPanel,
|
|
3281
3349
|
{
|
|
3282
3350
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -3333,7 +3401,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3333
3401
|
setBusy(false);
|
|
3334
3402
|
}
|
|
3335
3403
|
});
|
|
3336
|
-
return /* @__PURE__ */
|
|
3404
|
+
return /* @__PURE__ */ React62.createElement(Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React62.createElement(DialogTitle, null, "Image library"), /* @__PURE__ */ React62.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React62.createElement(
|
|
3337
3405
|
TextField,
|
|
3338
3406
|
{
|
|
3339
3407
|
fullWidth: true,
|
|
@@ -3343,11 +3411,11 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3343
3411
|
onChange: (e) => setQuery(e.target.value),
|
|
3344
3412
|
autoFocus: true,
|
|
3345
3413
|
InputProps: {
|
|
3346
|
-
startAdornment: /* @__PURE__ */
|
|
3414
|
+
startAdornment: /* @__PURE__ */ React62.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React62.createElement(SearchOutlined, { fontSize: "small" }))
|
|
3347
3415
|
},
|
|
3348
3416
|
sx: { mb: 2 }
|
|
3349
3417
|
}
|
|
3350
|
-
), error && /* @__PURE__ */
|
|
3418
|
+
), error && /* @__PURE__ */ React62.createElement(Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React62.createElement(Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React62.createElement(CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React62.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__ */ React62.createElement(
|
|
3351
3419
|
Box,
|
|
3352
3420
|
{
|
|
3353
3421
|
sx: {
|
|
@@ -3356,7 +3424,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3356
3424
|
gap: 1.5
|
|
3357
3425
|
}
|
|
3358
3426
|
},
|
|
3359
|
-
filtered.map((img) => /* @__PURE__ */
|
|
3427
|
+
filtered.map((img) => /* @__PURE__ */ React62.createElement(
|
|
3360
3428
|
ImageTile,
|
|
3361
3429
|
{
|
|
3362
3430
|
key: img.url,
|
|
@@ -3365,7 +3433,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3365
3433
|
onDelete: deleteImage ? () => handleDelete(img.url) : void 0
|
|
3366
3434
|
}
|
|
3367
3435
|
))
|
|
3368
|
-
)), /* @__PURE__ */
|
|
3436
|
+
)), /* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: onClose }, "Close")));
|
|
3369
3437
|
}
|
|
3370
3438
|
function ImageTile({
|
|
3371
3439
|
image,
|
|
@@ -3375,7 +3443,7 @@ function ImageTile({
|
|
|
3375
3443
|
var _a, _b;
|
|
3376
3444
|
const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
|
|
3377
3445
|
const label = image.alt || image.url.split("/").pop() || "image";
|
|
3378
|
-
return /* @__PURE__ */
|
|
3446
|
+
return /* @__PURE__ */ React62.createElement(
|
|
3379
3447
|
Box,
|
|
3380
3448
|
{
|
|
3381
3449
|
sx: {
|
|
@@ -3391,7 +3459,7 @@ function ImageTile({
|
|
|
3391
3459
|
},
|
|
3392
3460
|
onClick: onPick
|
|
3393
3461
|
},
|
|
3394
|
-
/* @__PURE__ */
|
|
3462
|
+
/* @__PURE__ */ React62.createElement(
|
|
3395
3463
|
Box,
|
|
3396
3464
|
{
|
|
3397
3465
|
component: "img",
|
|
@@ -3400,8 +3468,8 @@ function ImageTile({
|
|
|
3400
3468
|
sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
|
|
3401
3469
|
}
|
|
3402
3470
|
),
|
|
3403
|
-
/* @__PURE__ */
|
|
3404
|
-
onDelete && /* @__PURE__ */
|
|
3471
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
|
|
3472
|
+
onDelete && /* @__PURE__ */ React62.createElement(Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React62.createElement(
|
|
3405
3473
|
IconButton,
|
|
3406
3474
|
{
|
|
3407
3475
|
size: "small",
|
|
@@ -3421,7 +3489,7 @@ function ImageTile({
|
|
|
3421
3489
|
},
|
|
3422
3490
|
"aria-label": "Delete image"
|
|
3423
3491
|
},
|
|
3424
|
-
/* @__PURE__ */
|
|
3492
|
+
/* @__PURE__ */ React62.createElement(DeleteOutline, { fontSize: "small" })
|
|
3425
3493
|
))
|
|
3426
3494
|
);
|
|
3427
3495
|
}
|
|
@@ -3474,13 +3542,13 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3474
3542
|
});
|
|
3475
3543
|
const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
|
|
3476
3544
|
const showHttpWarning = isHttpUrl(url);
|
|
3477
|
-
return /* @__PURE__ */
|
|
3545
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
3478
3546
|
Button$1,
|
|
3479
3547
|
{
|
|
3480
3548
|
fullWidth: true,
|
|
3481
3549
|
variant: "outlined",
|
|
3482
3550
|
size: "small",
|
|
3483
|
-
startIcon: uploading ? /* @__PURE__ */
|
|
3551
|
+
startIcon: uploading ? /* @__PURE__ */ React62.createElement(CircularProgress, { size: 14 }) : /* @__PURE__ */ React62.createElement(CloudUploadOutlined, { fontSize: "small" }),
|
|
3484
3552
|
disabled: uploading,
|
|
3485
3553
|
onClick: () => {
|
|
3486
3554
|
var _a2;
|
|
@@ -3488,7 +3556,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3488
3556
|
}
|
|
3489
3557
|
},
|
|
3490
3558
|
uploading ? "Uploading\u2026" : "Upload"
|
|
3491
|
-
), /* @__PURE__ */
|
|
3559
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3492
3560
|
"input",
|
|
3493
3561
|
{
|
|
3494
3562
|
ref: fileInputRef,
|
|
@@ -3502,17 +3570,17 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3502
3570
|
if (file) yield handleFile(file);
|
|
3503
3571
|
})
|
|
3504
3572
|
}
|
|
3505
|
-
)), loadImages && /* @__PURE__ */
|
|
3573
|
+
)), loadImages && /* @__PURE__ */ React62.createElement(
|
|
3506
3574
|
Button$1,
|
|
3507
3575
|
{
|
|
3508
3576
|
fullWidth: true,
|
|
3509
3577
|
variant: "outlined",
|
|
3510
3578
|
size: "small",
|
|
3511
|
-
startIcon: /* @__PURE__ */
|
|
3579
|
+
startIcon: /* @__PURE__ */ React62.createElement(CollectionsOutlined, { fontSize: "small" }),
|
|
3512
3580
|
onClick: () => setLibraryOpen(true)
|
|
3513
3581
|
},
|
|
3514
3582
|
"Library"
|
|
3515
|
-
)), uploadError && /* @__PURE__ */
|
|
3583
|
+
)), uploadError && /* @__PURE__ */ React62.createElement(Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React62.createElement(
|
|
3516
3584
|
TextInput,
|
|
3517
3585
|
{
|
|
3518
3586
|
label: "Source URL",
|
|
@@ -3522,14 +3590,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3522
3590
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
|
|
3523
3591
|
}
|
|
3524
3592
|
}
|
|
3525
|
-
), showHttpWarning && /* @__PURE__ */
|
|
3593
|
+
), showHttpWarning && /* @__PURE__ */ React62.createElement(Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React62.createElement(ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React62.createElement(Box, { sx: { fontSize: 12, color: "warning.dark" } }, "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery.")), /* @__PURE__ */ React62.createElement(
|
|
3526
3594
|
TextInput,
|
|
3527
3595
|
{
|
|
3528
3596
|
label: "Alt text",
|
|
3529
3597
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
3530
3598
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
3531
3599
|
}
|
|
3532
|
-
), /* @__PURE__ */
|
|
3600
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3533
3601
|
TextInput,
|
|
3534
3602
|
{
|
|
3535
3603
|
label: "Click through URL",
|
|
@@ -3539,38 +3607,38 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3539
3607
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
3540
3608
|
}
|
|
3541
3609
|
}
|
|
3542
|
-
), /* @__PURE__ */
|
|
3610
|
+
), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62.createElement(
|
|
3543
3611
|
TextDimensionInput,
|
|
3544
3612
|
{
|
|
3545
3613
|
label: "Width",
|
|
3546
3614
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
3547
3615
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
3548
3616
|
}
|
|
3549
|
-
), /* @__PURE__ */
|
|
3617
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3550
3618
|
TextDimensionInput,
|
|
3551
3619
|
{
|
|
3552
3620
|
label: "Height",
|
|
3553
3621
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
3554
3622
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
3555
3623
|
}
|
|
3556
|
-
)), /* @__PURE__ */
|
|
3624
|
+
)), /* @__PURE__ */ React62.createElement(
|
|
3557
3625
|
RadioGroupInput,
|
|
3558
3626
|
{
|
|
3559
3627
|
label: "Alignment",
|
|
3560
3628
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
3561
3629
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
3562
3630
|
},
|
|
3563
|
-
/* @__PURE__ */
|
|
3564
|
-
/* @__PURE__ */
|
|
3565
|
-
/* @__PURE__ */
|
|
3566
|
-
), /* @__PURE__ */
|
|
3631
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React62.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3632
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React62.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3633
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React62.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3634
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3567
3635
|
MultiStylePropertyPanel,
|
|
3568
3636
|
{
|
|
3569
3637
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
3570
3638
|
value: data.style,
|
|
3571
3639
|
onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
|
|
3572
3640
|
}
|
|
3573
|
-
), loadImages && /* @__PURE__ */
|
|
3641
|
+
), loadImages && /* @__PURE__ */ React62.createElement(
|
|
3574
3642
|
ImageLibraryDialog,
|
|
3575
3643
|
{
|
|
3576
3644
|
open: libraryOpen,
|
|
@@ -3609,74 +3677,74 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3609
3677
|
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3610
3678
|
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3611
3679
|
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3612
|
-
return /* @__PURE__ */
|
|
3680
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React62.createElement(
|
|
3613
3681
|
TextInput,
|
|
3614
3682
|
{
|
|
3615
3683
|
label: "Greeting",
|
|
3616
3684
|
defaultValue: greeting,
|
|
3617
3685
|
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3618
3686
|
}
|
|
3619
|
-
), /* @__PURE__ */
|
|
3687
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3620
3688
|
TextInput,
|
|
3621
3689
|
{
|
|
3622
3690
|
label: "Name",
|
|
3623
3691
|
defaultValue: name,
|
|
3624
3692
|
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3625
3693
|
}
|
|
3626
|
-
), /* @__PURE__ */
|
|
3694
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3627
3695
|
TextInput,
|
|
3628
3696
|
{
|
|
3629
3697
|
label: "Title",
|
|
3630
3698
|
defaultValue: title,
|
|
3631
3699
|
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3632
3700
|
}
|
|
3633
|
-
), /* @__PURE__ */
|
|
3701
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3634
3702
|
TextInput,
|
|
3635
3703
|
{
|
|
3636
3704
|
label: "Company",
|
|
3637
3705
|
defaultValue: company,
|
|
3638
3706
|
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3639
3707
|
}
|
|
3640
|
-
), /* @__PURE__ */
|
|
3708
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3641
3709
|
TextInput,
|
|
3642
3710
|
{
|
|
3643
3711
|
label: "Address",
|
|
3644
3712
|
defaultValue: address,
|
|
3645
3713
|
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3646
3714
|
}
|
|
3647
|
-
), /* @__PURE__ */
|
|
3715
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3648
3716
|
TextInput,
|
|
3649
3717
|
{
|
|
3650
3718
|
label: "Email",
|
|
3651
3719
|
defaultValue: email,
|
|
3652
3720
|
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3653
3721
|
}
|
|
3654
|
-
), /* @__PURE__ */
|
|
3722
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3655
3723
|
TextInput,
|
|
3656
3724
|
{
|
|
3657
3725
|
label: "Phone",
|
|
3658
3726
|
defaultValue: phone,
|
|
3659
3727
|
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3660
3728
|
}
|
|
3661
|
-
), /* @__PURE__ */
|
|
3729
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3662
3730
|
TextInput,
|
|
3663
3731
|
{
|
|
3664
3732
|
label: "Website",
|
|
3665
3733
|
defaultValue: website,
|
|
3666
3734
|
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3667
3735
|
}
|
|
3668
|
-
), /* @__PURE__ */
|
|
3736
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3669
3737
|
TextInput,
|
|
3670
3738
|
{
|
|
3671
3739
|
label: "Image URL",
|
|
3672
3740
|
defaultValue: imageUrl,
|
|
3673
3741
|
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3674
3742
|
}
|
|
3675
|
-
), /* @__PURE__ */
|
|
3743
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3676
3744
|
SliderInput,
|
|
3677
3745
|
{
|
|
3678
3746
|
label: "Image size",
|
|
3679
|
-
iconLabel: /* @__PURE__ */
|
|
3747
|
+
iconLabel: /* @__PURE__ */ React62.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3680
3748
|
units: "px",
|
|
3681
3749
|
step: 4,
|
|
3682
3750
|
min: 32,
|
|
@@ -3684,47 +3752,47 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3684
3752
|
defaultValue: imageSize,
|
|
3685
3753
|
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3686
3754
|
}
|
|
3687
|
-
), /* @__PURE__ */
|
|
3755
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3688
3756
|
RadioGroupInput,
|
|
3689
3757
|
{
|
|
3690
3758
|
label: "Image shape",
|
|
3691
3759
|
defaultValue: imageShape,
|
|
3692
3760
|
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3693
3761
|
},
|
|
3694
|
-
/* @__PURE__ */
|
|
3695
|
-
/* @__PURE__ */
|
|
3696
|
-
/* @__PURE__ */
|
|
3697
|
-
), /* @__PURE__ */
|
|
3762
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "circle" }, "Circle"),
|
|
3763
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "square" }, "Square"),
|
|
3764
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "rounded" }, "Rounded")
|
|
3765
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3698
3766
|
RadioGroupInput,
|
|
3699
3767
|
{
|
|
3700
3768
|
label: "Layout",
|
|
3701
3769
|
defaultValue: layout,
|
|
3702
3770
|
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3703
3771
|
},
|
|
3704
|
-
/* @__PURE__ */
|
|
3705
|
-
/* @__PURE__ */
|
|
3706
|
-
), /* @__PURE__ */
|
|
3772
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
|
|
3773
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "vertical" }, "Vertical")
|
|
3774
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3707
3775
|
ColorInput2,
|
|
3708
3776
|
{
|
|
3709
3777
|
label: "Name color",
|
|
3710
3778
|
defaultValue: nameColor,
|
|
3711
3779
|
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3712
3780
|
}
|
|
3713
|
-
), /* @__PURE__ */
|
|
3781
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3714
3782
|
ColorInput2,
|
|
3715
3783
|
{
|
|
3716
3784
|
label: "Text color",
|
|
3717
3785
|
defaultValue: textColor,
|
|
3718
3786
|
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3719
3787
|
}
|
|
3720
|
-
), /* @__PURE__ */
|
|
3788
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3721
3789
|
ColorInput2,
|
|
3722
3790
|
{
|
|
3723
3791
|
label: "Link color",
|
|
3724
3792
|
defaultValue: linkColor,
|
|
3725
3793
|
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3726
3794
|
}
|
|
3727
|
-
), /* @__PURE__ */
|
|
3795
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3728
3796
|
MultiStylePropertyPanel,
|
|
3729
3797
|
{
|
|
3730
3798
|
names: ["backgroundColor", "fontFamily", "padding"],
|
|
@@ -3745,11 +3813,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3745
3813
|
setErrors(res.error);
|
|
3746
3814
|
}
|
|
3747
3815
|
};
|
|
3748
|
-
return /* @__PURE__ */
|
|
3816
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React62.createElement(
|
|
3749
3817
|
SliderInput,
|
|
3750
3818
|
{
|
|
3751
3819
|
label: "Height",
|
|
3752
|
-
iconLabel: /* @__PURE__ */
|
|
3820
|
+
iconLabel: /* @__PURE__ */ React62.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3753
3821
|
units: "px",
|
|
3754
3822
|
step: 4,
|
|
3755
3823
|
min: 4,
|
|
@@ -3771,7 +3839,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3771
3839
|
setErrors(res.error);
|
|
3772
3840
|
}
|
|
3773
3841
|
};
|
|
3774
|
-
return /* @__PURE__ */
|
|
3842
|
+
return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React62.createElement(
|
|
3775
3843
|
TextInput,
|
|
3776
3844
|
{
|
|
3777
3845
|
label: "Content",
|
|
@@ -3779,14 +3847,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3779
3847
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3780
3848
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3781
3849
|
}
|
|
3782
|
-
), /* @__PURE__ */
|
|
3850
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3783
3851
|
BooleanInput,
|
|
3784
3852
|
{
|
|
3785
3853
|
label: "Markdown",
|
|
3786
3854
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3787
3855
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3788
3856
|
}
|
|
3789
|
-
), /* @__PURE__ */
|
|
3857
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3790
3858
|
MultiStylePropertyPanel,
|
|
3791
3859
|
{
|
|
3792
3860
|
names: [
|
|
@@ -3808,7 +3876,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3808
3876
|
|
|
3809
3877
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
3810
3878
|
function renderMessage(val) {
|
|
3811
|
-
return /* @__PURE__ */
|
|
3879
|
+
return /* @__PURE__ */ React62.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React62.createElement(Typography, { color: "text.secondary" }, val));
|
|
3812
3880
|
}
|
|
3813
3881
|
function ConfigurationPanel() {
|
|
3814
3882
|
const document2 = useDocument();
|
|
@@ -3824,55 +3892,55 @@ function ConfigurationPanel() {
|
|
|
3824
3892
|
const { data, type } = block;
|
|
3825
3893
|
switch (type) {
|
|
3826
3894
|
case "Avatar":
|
|
3827
|
-
return /* @__PURE__ */
|
|
3895
|
+
return /* @__PURE__ */ React62.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3828
3896
|
case "Button":
|
|
3829
|
-
return /* @__PURE__ */
|
|
3897
|
+
return /* @__PURE__ */ React62.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3830
3898
|
case "ColumnsContainer":
|
|
3831
|
-
return /* @__PURE__ */
|
|
3899
|
+
return /* @__PURE__ */ React62.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3832
3900
|
case "Container":
|
|
3833
|
-
return /* @__PURE__ */
|
|
3901
|
+
return /* @__PURE__ */ React62.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3834
3902
|
case "Divider":
|
|
3835
|
-
return /* @__PURE__ */
|
|
3903
|
+
return /* @__PURE__ */ React62.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3836
3904
|
case "Heading":
|
|
3837
|
-
return /* @__PURE__ */
|
|
3905
|
+
return /* @__PURE__ */ React62.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3838
3906
|
case "Html":
|
|
3839
|
-
return /* @__PURE__ */
|
|
3907
|
+
return /* @__PURE__ */ React62.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3840
3908
|
case "Image":
|
|
3841
|
-
return /* @__PURE__ */
|
|
3909
|
+
return /* @__PURE__ */ React62.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3842
3910
|
case "EmailLayout":
|
|
3843
|
-
return /* @__PURE__ */
|
|
3911
|
+
return /* @__PURE__ */ React62.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3844
3912
|
case "Spacer":
|
|
3845
|
-
return /* @__PURE__ */
|
|
3913
|
+
return /* @__PURE__ */ React62.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3846
3914
|
case "Signature":
|
|
3847
|
-
return /* @__PURE__ */
|
|
3915
|
+
return /* @__PURE__ */ React62.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3848
3916
|
case "Text":
|
|
3849
|
-
return /* @__PURE__ */
|
|
3917
|
+
return /* @__PURE__ */ React62.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3850
3918
|
default:
|
|
3851
|
-
return /* @__PURE__ */
|
|
3919
|
+
return /* @__PURE__ */ React62.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
3852
3920
|
}
|
|
3853
3921
|
}
|
|
3854
3922
|
function StylesPanel() {
|
|
3855
3923
|
const block = useDocument().root;
|
|
3856
3924
|
if (!block) {
|
|
3857
|
-
return /* @__PURE__ */
|
|
3925
|
+
return /* @__PURE__ */ React62.createElement("p", null, "Block not found");
|
|
3858
3926
|
}
|
|
3859
3927
|
const { data, type } = block;
|
|
3860
3928
|
if (type !== "EmailLayout") {
|
|
3861
3929
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3862
3930
|
}
|
|
3863
|
-
return /* @__PURE__ */
|
|
3931
|
+
return /* @__PURE__ */ React62.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3864
3932
|
}
|
|
3865
3933
|
function TemplateDownloadButton() {
|
|
3866
3934
|
const doc = useDocument();
|
|
3867
3935
|
const href = useMemo(() => {
|
|
3868
3936
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3869
3937
|
}, [doc]);
|
|
3870
|
-
return /* @__PURE__ */
|
|
3938
|
+
return /* @__PURE__ */ React62.createElement(
|
|
3871
3939
|
Button$1,
|
|
3872
3940
|
{
|
|
3873
3941
|
variant: "outlined",
|
|
3874
3942
|
color: "primary",
|
|
3875
|
-
startIcon: /* @__PURE__ */
|
|
3943
|
+
startIcon: /* @__PURE__ */ React62.createElement(FileDownloadOutlined, null),
|
|
3876
3944
|
href,
|
|
3877
3945
|
download: "emailTemplate.json",
|
|
3878
3946
|
fullWidth: true
|
|
@@ -3886,6 +3954,7 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3886
3954
|
const { currentTemplateId, currentTemplateName } = useEmailEditor();
|
|
3887
3955
|
const document2 = useDocument();
|
|
3888
3956
|
const persistenceEnabled = usePersistenceEnabled();
|
|
3957
|
+
const workspaceBackground = useWorkspaceBackground();
|
|
3889
3958
|
const handleDelete = () => {
|
|
3890
3959
|
if (!currentTemplateId || !window.confirm("Are you sure you want to delete this template?")) {
|
|
3891
3960
|
return;
|
|
@@ -3903,10 +3972,21 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3903
3972
|
window.alert("Template copied successfully!");
|
|
3904
3973
|
}
|
|
3905
3974
|
};
|
|
3975
|
+
const workspaceToggle = /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Editor appearance" }, /* @__PURE__ */ React62.createElement(Stack, { spacing: 1 }, /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.secondary" } }, "Workspace background"), /* @__PURE__ */ React62.createElement(
|
|
3976
|
+
ToggleButtonGroup,
|
|
3977
|
+
{
|
|
3978
|
+
value: workspaceBackground,
|
|
3979
|
+
exclusive: true,
|
|
3980
|
+
size: "small",
|
|
3981
|
+
onChange: (_, v) => v && setWorkspaceBackground(v)
|
|
3982
|
+
},
|
|
3983
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "checkerboard", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React62.createElement(GridOnOutlined, { fontSize: "small" }), "Checkerboard"),
|
|
3984
|
+
/* @__PURE__ */ React62.createElement(ToggleButton, { value: "solid", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React62.createElement(SquareOutlined, { fontSize: "small" }), "Solid")
|
|
3985
|
+
), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.disabled" } }, "Editor-only \u2014 never reaches the rendered email.")));
|
|
3906
3986
|
if (!currentTemplateId) {
|
|
3907
|
-
return /* @__PURE__ */
|
|
3987
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected"), workspaceToggle);
|
|
3908
3988
|
}
|
|
3909
|
-
return /* @__PURE__ */
|
|
3989
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React62.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React62.createElement(
|
|
3910
3990
|
Typography,
|
|
3911
3991
|
{
|
|
3912
3992
|
variant: "body2",
|
|
@@ -3919,29 +3999,29 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3919
3999
|
}
|
|
3920
4000
|
},
|
|
3921
4001
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
3922
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
4002
|
+
), persistenceEnabled && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
3923
4003
|
Button$1,
|
|
3924
4004
|
{
|
|
3925
4005
|
variant: "outlined",
|
|
3926
4006
|
color: "primary",
|
|
3927
|
-
startIcon: /* @__PURE__ */
|
|
4007
|
+
startIcon: /* @__PURE__ */ React62.createElement(ContentCopyOutlined, null),
|
|
3928
4008
|
onClick: handleCopyToSamples,
|
|
3929
4009
|
fullWidth: true,
|
|
3930
4010
|
disabled: !copyTemplate
|
|
3931
4011
|
},
|
|
3932
4012
|
"Save as Sample Template"
|
|
3933
|
-
), /* @__PURE__ */
|
|
4013
|
+
), /* @__PURE__ */ React62.createElement(
|
|
3934
4014
|
Button$1,
|
|
3935
4015
|
{
|
|
3936
4016
|
variant: "outlined",
|
|
3937
4017
|
color: "error",
|
|
3938
|
-
startIcon: /* @__PURE__ */
|
|
4018
|
+
startIcon: /* @__PURE__ */ React62.createElement(DeleteOutlined, null),
|
|
3939
4019
|
onClick: handleDelete,
|
|
3940
4020
|
fullWidth: true,
|
|
3941
4021
|
disabled: !deleteTemplate
|
|
3942
4022
|
},
|
|
3943
4023
|
"Delete Template"
|
|
3944
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
4024
|
+
)))), persistenceEnabled && /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React62.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React62.createElement(TemplateDownloadButton, null))), workspaceToggle);
|
|
3945
4025
|
}
|
|
3946
4026
|
|
|
3947
4027
|
// src/app/variables/variable-utils.ts
|
|
@@ -4115,7 +4195,7 @@ function VariablesPanel() {
|
|
|
4115
4195
|
const lastFocused = useLastFocusedEditable();
|
|
4116
4196
|
const root = document2.root;
|
|
4117
4197
|
if (!root || root.type !== "EmailLayout") {
|
|
4118
|
-
return /* @__PURE__ */
|
|
4198
|
+
return /* @__PURE__ */ React62.createElement(Box, { p: 2 }, /* @__PURE__ */ React62.createElement(Alert, { severity: "info" }, "Open a template to manage variables."));
|
|
4119
4199
|
}
|
|
4120
4200
|
const data = root.data;
|
|
4121
4201
|
const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
|
|
@@ -4210,7 +4290,7 @@ function VariablesPanel() {
|
|
|
4210
4290
|
} catch (e) {
|
|
4211
4291
|
}
|
|
4212
4292
|
});
|
|
4213
|
-
return /* @__PURE__ */
|
|
4293
|
+
return /* @__PURE__ */ React62.createElement(Box, { p: 2 }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React62.createElement(Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Add variable" }, /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React62.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__ */ React62.createElement(Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), ". In Preview mode, tokens render with the sample values below."), undeclared.length > 0 && /* @__PURE__ */ React62.createElement(Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React62.createElement(AlertTitle, { sx: { fontSize: 13 } }, "Undeclared in body"), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React62.createElement(
|
|
4214
4294
|
Chip,
|
|
4215
4295
|
{
|
|
4216
4296
|
key: name,
|
|
@@ -4218,12 +4298,12 @@ function VariablesPanel() {
|
|
|
4218
4298
|
label: name,
|
|
4219
4299
|
onClick: () => addFromToken(name),
|
|
4220
4300
|
onDelete: () => addFromToken(name),
|
|
4221
|
-
deleteIcon: /* @__PURE__ */
|
|
4301
|
+
deleteIcon: /* @__PURE__ */ React62.createElement(AddOutlined, null),
|
|
4222
4302
|
sx: { fontFamily: "monospace" }
|
|
4223
4303
|
}
|
|
4224
|
-
))), /* @__PURE__ */
|
|
4304
|
+
))), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, "Click a token to declare it.")), variables.length === 0 ? /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React62.createElement(Stack, { spacing: 2 }, variables.map((v, i) => {
|
|
4225
4305
|
var _a2;
|
|
4226
|
-
return /* @__PURE__ */
|
|
4306
|
+
return /* @__PURE__ */ React62.createElement(
|
|
4227
4307
|
VariableRow,
|
|
4228
4308
|
{
|
|
4229
4309
|
key: i,
|
|
@@ -4274,7 +4354,7 @@ function VariableRow({
|
|
|
4274
4354
|
onCommitRename(draftName.trim());
|
|
4275
4355
|
}
|
|
4276
4356
|
};
|
|
4277
|
-
return /* @__PURE__ */
|
|
4357
|
+
return /* @__PURE__ */ React62.createElement(Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(
|
|
4278
4358
|
TextField,
|
|
4279
4359
|
{
|
|
4280
4360
|
label: "Name",
|
|
@@ -4299,7 +4379,7 @@ function VariableRow({
|
|
|
4299
4379
|
error: Boolean(nameError),
|
|
4300
4380
|
helperText: nameError != null ? nameError : " "
|
|
4301
4381
|
}
|
|
4302
|
-
), /* @__PURE__ */
|
|
4382
|
+
), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Copy {{name}}" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
|
|
4303
4383
|
IconButton,
|
|
4304
4384
|
{
|
|
4305
4385
|
size: "small",
|
|
@@ -4307,8 +4387,8 @@ function VariableRow({
|
|
|
4307
4387
|
disabled: !hasName,
|
|
4308
4388
|
"aria-label": `Copy ${variable.name || "variable"} token`
|
|
4309
4389
|
},
|
|
4310
|
-
/* @__PURE__ */
|
|
4311
|
-
))), /* @__PURE__ */
|
|
4390
|
+
/* @__PURE__ */ React62.createElement(ContentCopyOutlined, { fontSize: "small" })
|
|
4391
|
+
))), /* @__PURE__ */ React62.createElement(Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
|
|
4312
4392
|
IconButton,
|
|
4313
4393
|
{
|
|
4314
4394
|
size: "small",
|
|
@@ -4316,16 +4396,16 @@ function VariableRow({
|
|
|
4316
4396
|
disabled: !hasName || !canInsert,
|
|
4317
4397
|
"aria-label": `Insert ${variable.name || "variable"} at cursor`
|
|
4318
4398
|
},
|
|
4319
|
-
/* @__PURE__ */
|
|
4320
|
-
))), /* @__PURE__ */
|
|
4399
|
+
/* @__PURE__ */ React62.createElement(InputOutlined, { fontSize: "small" })
|
|
4400
|
+
))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Remove" }, /* @__PURE__ */ React62.createElement(
|
|
4321
4401
|
IconButton,
|
|
4322
4402
|
{
|
|
4323
4403
|
size: "small",
|
|
4324
4404
|
onClick: onRemove,
|
|
4325
4405
|
"aria-label": `Remove ${variable.name || "variable"}`
|
|
4326
4406
|
},
|
|
4327
|
-
/* @__PURE__ */
|
|
4328
|
-
)))), /* @__PURE__ */
|
|
4407
|
+
/* @__PURE__ */ React62.createElement(DeleteOutline, { fontSize: "small" })
|
|
4408
|
+
)))), /* @__PURE__ */ React62.createElement(
|
|
4329
4409
|
TextField,
|
|
4330
4410
|
{
|
|
4331
4411
|
label: "Description",
|
|
@@ -4335,7 +4415,7 @@ function VariableRow({
|
|
|
4335
4415
|
onChange: (e) => onChangeDescription(e.target.value),
|
|
4336
4416
|
placeholder: "Optional"
|
|
4337
4417
|
}
|
|
4338
|
-
), /* @__PURE__ */
|
|
4418
|
+
), /* @__PURE__ */ React62.createElement(
|
|
4339
4419
|
TextField,
|
|
4340
4420
|
{
|
|
4341
4421
|
label: "Sample value",
|
|
@@ -4345,7 +4425,7 @@ function VariableRow({
|
|
|
4345
4425
|
onChange: (e) => onChangeSampleValue(e.target.value),
|
|
4346
4426
|
placeholder: "Shown in Preview mode",
|
|
4347
4427
|
InputProps: {
|
|
4348
|
-
startAdornment: /* @__PURE__ */
|
|
4428
|
+
startAdornment: /* @__PURE__ */ React62.createElement(
|
|
4349
4429
|
DataObjectOutlined,
|
|
4350
4430
|
{
|
|
4351
4431
|
fontSize: "small",
|
|
@@ -4354,7 +4434,7 @@ function VariableRow({
|
|
|
4354
4434
|
)
|
|
4355
4435
|
}
|
|
4356
4436
|
}
|
|
4357
|
-
), /* @__PURE__ */
|
|
4437
|
+
), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React62.createElement(Chip, { size: "small", color: "warning", variant: "outlined", label: "Unused in body" }) : /* @__PURE__ */ React62.createElement(
|
|
4358
4438
|
Chip,
|
|
4359
4439
|
{
|
|
4360
4440
|
size: "small",
|
|
@@ -4378,13 +4458,13 @@ function InspectorDrawer({
|
|
|
4378
4458
|
const renderCurrentSidebarPanel = () => {
|
|
4379
4459
|
switch (selectedSidebarTab) {
|
|
4380
4460
|
case "block-configuration":
|
|
4381
|
-
return /* @__PURE__ */
|
|
4461
|
+
return /* @__PURE__ */ React62.createElement(ConfigurationPanel, null);
|
|
4382
4462
|
case "styles":
|
|
4383
|
-
return /* @__PURE__ */
|
|
4463
|
+
return /* @__PURE__ */ React62.createElement(StylesPanel, null);
|
|
4384
4464
|
case "variables":
|
|
4385
|
-
return /* @__PURE__ */
|
|
4465
|
+
return /* @__PURE__ */ React62.createElement(VariablesPanel, null);
|
|
4386
4466
|
case "template-settings":
|
|
4387
|
-
return /* @__PURE__ */
|
|
4467
|
+
return /* @__PURE__ */ React62.createElement(
|
|
4388
4468
|
TemplatePanel,
|
|
4389
4469
|
{
|
|
4390
4470
|
deleteTemplate,
|
|
@@ -4393,7 +4473,7 @@ function InspectorDrawer({
|
|
|
4393
4473
|
);
|
|
4394
4474
|
}
|
|
4395
4475
|
};
|
|
4396
|
-
return /* @__PURE__ */
|
|
4476
|
+
return /* @__PURE__ */ React62.createElement(
|
|
4397
4477
|
Drawer,
|
|
4398
4478
|
{
|
|
4399
4479
|
variant: "persistent",
|
|
@@ -4415,7 +4495,7 @@ function InspectorDrawer({
|
|
|
4415
4495
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
4416
4496
|
}
|
|
4417
4497
|
},
|
|
4418
|
-
/* @__PURE__ */
|
|
4498
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React62.createElement(Box, { px: 1 }, /* @__PURE__ */ React62.createElement(
|
|
4419
4499
|
Tabs,
|
|
4420
4500
|
{
|
|
4421
4501
|
value: selectedSidebarTab,
|
|
@@ -4423,12 +4503,12 @@ function InspectorDrawer({
|
|
|
4423
4503
|
variant: "fullWidth",
|
|
4424
4504
|
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
4425
4505
|
},
|
|
4426
|
-
/* @__PURE__ */
|
|
4427
|
-
/* @__PURE__ */
|
|
4428
|
-
/* @__PURE__ */
|
|
4429
|
-
/* @__PURE__ */
|
|
4506
|
+
/* @__PURE__ */ React62.createElement(Tab, { value: "styles", label: "Styles" }),
|
|
4507
|
+
/* @__PURE__ */ React62.createElement(Tab, { value: "block-configuration", label: "Inspect" }),
|
|
4508
|
+
/* @__PURE__ */ React62.createElement(Tab, { value: "variables", label: "Variables" }),
|
|
4509
|
+
/* @__PURE__ */ React62.createElement(Tab, { value: "template-settings", label: "Settings" })
|
|
4430
4510
|
))),
|
|
4431
|
-
/* @__PURE__ */
|
|
4511
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
4432
4512
|
);
|
|
4433
4513
|
}
|
|
4434
4514
|
var SnackbarContext = createContext(null);
|
|
@@ -4449,7 +4529,7 @@ function SnackbarProvider({ children }) {
|
|
|
4449
4529
|
const handleClose = () => {
|
|
4450
4530
|
setMessage(null);
|
|
4451
4531
|
};
|
|
4452
|
-
return /* @__PURE__ */
|
|
4532
|
+
return /* @__PURE__ */ React62.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React62.createElement(
|
|
4453
4533
|
Snackbar,
|
|
4454
4534
|
{
|
|
4455
4535
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4497,6 +4577,16 @@ function TemplateRow({
|
|
|
4497
4577
|
}) {
|
|
4498
4578
|
const { setCurrentTemplate } = useEmailEditor();
|
|
4499
4579
|
const [hover, setHover] = useState(false);
|
|
4580
|
+
const [menuAnchor, setMenuAnchor] = useState(null);
|
|
4581
|
+
const closeMenu = () => setMenuAnchor(null);
|
|
4582
|
+
const openMenu = (e) => {
|
|
4583
|
+
e.stopPropagation();
|
|
4584
|
+
setMenuAnchor(e.currentTarget);
|
|
4585
|
+
};
|
|
4586
|
+
const runAction = (fn) => () => {
|
|
4587
|
+
closeMenu();
|
|
4588
|
+
fn == null ? void 0 : fn();
|
|
4589
|
+
};
|
|
4500
4590
|
const handleClick = () => __async(null, null, function* () {
|
|
4501
4591
|
try {
|
|
4502
4592
|
const content = yield templateLoader();
|
|
@@ -4515,7 +4605,7 @@ function TemplateRow({
|
|
|
4515
4605
|
const hasActions = Boolean(
|
|
4516
4606
|
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
4517
4607
|
);
|
|
4518
|
-
return /* @__PURE__ */
|
|
4608
|
+
return /* @__PURE__ */ React62.createElement(
|
|
4519
4609
|
Box,
|
|
4520
4610
|
{
|
|
4521
4611
|
role: "button",
|
|
@@ -4541,7 +4631,7 @@ function TemplateRow({
|
|
|
4541
4631
|
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
4542
4632
|
}
|
|
4543
4633
|
},
|
|
4544
|
-
/* @__PURE__ */
|
|
4634
|
+
/* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React62.createElement(Box, { sx: { flexGrow: 1, minWidth: 0, pr: hasActions ? 3 : 0 } }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React62.createElement(
|
|
4545
4635
|
Typography,
|
|
4546
4636
|
{
|
|
4547
4637
|
variant: "body2",
|
|
@@ -4555,14 +4645,14 @@ function TemplateRow({
|
|
|
4555
4645
|
title: template.slug
|
|
4556
4646
|
},
|
|
4557
4647
|
template.slug
|
|
4558
|
-
), updated && /* @__PURE__ */
|
|
4648
|
+
), updated && !hasActions && /* @__PURE__ */ React62.createElement(
|
|
4559
4649
|
Typography,
|
|
4560
4650
|
{
|
|
4561
4651
|
variant: "caption",
|
|
4562
4652
|
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
4563
4653
|
},
|
|
4564
4654
|
updated
|
|
4565
|
-
)), template.description && /* @__PURE__ */
|
|
4655
|
+
)), template.description && /* @__PURE__ */ React62.createElement(
|
|
4566
4656
|
Typography,
|
|
4567
4657
|
{
|
|
4568
4658
|
variant: "caption",
|
|
@@ -4576,7 +4666,7 @@ function TemplateRow({
|
|
|
4576
4666
|
}
|
|
4577
4667
|
},
|
|
4578
4668
|
template.description
|
|
4579
|
-
), template.tags && template.tags.length > 0 && /* @__PURE__ */
|
|
4669
|
+
), template.tags && template.tags.length > 0 && /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React62.createElement(
|
|
4580
4670
|
Chip,
|
|
4581
4671
|
{
|
|
4582
4672
|
key: tag,
|
|
@@ -4585,164 +4675,807 @@ function TemplateRow({
|
|
|
4585
4675
|
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
4586
4676
|
}
|
|
4587
4677
|
))))),
|
|
4588
|
-
hasActions &&
|
|
4589
|
-
|
|
4678
|
+
hasActions && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(Tooltip, { title: "More" }, /* @__PURE__ */ React62.createElement(
|
|
4679
|
+
IconButton,
|
|
4590
4680
|
{
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4681
|
+
size: "small",
|
|
4682
|
+
onClick: openMenu,
|
|
4683
|
+
"aria-label": "Row actions",
|
|
4684
|
+
"aria-haspopup": "menu",
|
|
4685
|
+
"aria-expanded": Boolean(menuAnchor) || void 0,
|
|
4594
4686
|
sx: {
|
|
4595
4687
|
position: "absolute",
|
|
4596
4688
|
top: 4,
|
|
4597
4689
|
right: 4,
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
boxShadow: 1,
|
|
4601
|
-
p: 0.25
|
|
4690
|
+
opacity: hover || isCurrent || Boolean(menuAnchor) ? 1 : 0.45,
|
|
4691
|
+
transition: "opacity 120ms"
|
|
4602
4692
|
}
|
|
4603
4693
|
},
|
|
4604
|
-
|
|
4605
|
-
|
|
4606
|
-
|
|
4607
|
-
|
|
4608
|
-
|
|
4609
|
-
|
|
4610
|
-
|
|
4611
|
-
|
|
4612
|
-
},
|
|
4613
|
-
|
|
4614
|
-
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
|
|
4622
|
-
|
|
4623
|
-
},
|
|
4624
|
-
|
|
4625
|
-
|
|
4626
|
-
|
|
4627
|
-
|
|
4628
|
-
|
|
4629
|
-
|
|
4630
|
-
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4694
|
+
/* @__PURE__ */ React62.createElement(MoreVertOutlined, { fontSize: "small" })
|
|
4695
|
+
)), /* @__PURE__ */ React62.createElement(
|
|
4696
|
+
Menu,
|
|
4697
|
+
{
|
|
4698
|
+
anchorEl: menuAnchor,
|
|
4699
|
+
open: Boolean(menuAnchor),
|
|
4700
|
+
onClose: closeMenu,
|
|
4701
|
+
onClick: stop,
|
|
4702
|
+
anchorOrigin: { vertical: "bottom", horizontal: "right" },
|
|
4703
|
+
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
4704
|
+
slotProps: { paper: { sx: { minWidth: 200 } } }
|
|
4705
|
+
},
|
|
4706
|
+
onRename && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onRename) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(DriveFileRenameOutlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Edit name & tags\u2026")),
|
|
4707
|
+
onDuplicate && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onDuplicate) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(ContentCopyOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Duplicate")),
|
|
4708
|
+
onDuplicateAsTemplate && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onDuplicateAsTemplate) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(LibraryAddOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Duplicate as template")),
|
|
4709
|
+
onPromote && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onPromote) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(FileUploadOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Promote to sample")),
|
|
4710
|
+
onDemote && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onDemote) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(FileDownloadOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Demote to template")),
|
|
4711
|
+
onDelete && [
|
|
4712
|
+
/* @__PURE__ */ React62.createElement(Divider$1, { key: "divider" }),
|
|
4713
|
+
/* @__PURE__ */ React62.createElement(MenuItem, { key: "delete", onClick: runAction(onDelete), sx: { color: "error.main" } }, /* @__PURE__ */ React62.createElement(ListItemIcon, { sx: { color: "error.main" } }, /* @__PURE__ */ React62.createElement(DeleteOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Delete"))
|
|
4714
|
+
]
|
|
4715
|
+
))
|
|
4716
|
+
);
|
|
4717
|
+
}
|
|
4718
|
+
|
|
4719
|
+
// src/editor/blocks/helpers/move-block.ts
|
|
4720
|
+
function sameParent(a, b) {
|
|
4721
|
+
if (a.kind !== b.kind || a.parentId !== b.parentId) return false;
|
|
4722
|
+
if (a.kind === "ColumnsContainer" && b.kind === "ColumnsContainer") {
|
|
4723
|
+
return a.columnIndex === b.columnIndex;
|
|
4724
|
+
}
|
|
4725
|
+
return true;
|
|
4726
|
+
}
|
|
4727
|
+
function getChildrenIds(doc, ref) {
|
|
4728
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
4729
|
+
const block = doc[ref.parentId];
|
|
4730
|
+
if (!block) return [];
|
|
4731
|
+
if (ref.kind === "EmailLayout") return (_b = (_a = block.data) == null ? void 0 : _a.childrenIds) != null ? _b : [];
|
|
4732
|
+
if (ref.kind === "Container") return (_e = (_d = (_c = block.data) == null ? void 0 : _c.props) == null ? void 0 : _d.childrenIds) != null ? _e : [];
|
|
4733
|
+
const col = (_h = (_g = (_f = block.data) == null ? void 0 : _f.props) == null ? void 0 : _g.columns) == null ? void 0 : _h[ref.columnIndex];
|
|
4734
|
+
return (_i = col == null ? void 0 : col.childrenIds) != null ? _i : [];
|
|
4735
|
+
}
|
|
4736
|
+
function patchChildrenIds(block, ref, newIds) {
|
|
4737
|
+
var _a, _b, _c;
|
|
4738
|
+
if (ref.kind === "EmailLayout") {
|
|
4739
|
+
return __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { childrenIds: newIds }) });
|
|
4740
|
+
}
|
|
4741
|
+
if (ref.kind === "Container") {
|
|
4742
|
+
return __spreadProps(__spreadValues({}, block), {
|
|
4743
|
+
data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { childrenIds: newIds }) })
|
|
4744
|
+
});
|
|
4745
|
+
}
|
|
4746
|
+
const columns = ((_c = (_b = (_a = block.data) == null ? void 0 : _a.props) == null ? void 0 : _b.columns) != null ? _c : []).map(
|
|
4747
|
+
(c, i) => i === ref.columnIndex ? __spreadProps(__spreadValues({}, c), { childrenIds: newIds }) : c
|
|
4748
|
+
);
|
|
4749
|
+
return __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { columns }) }) });
|
|
4750
|
+
}
|
|
4751
|
+
function isDescendant(doc, ancestorId, candidateId) {
|
|
4752
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
4753
|
+
if (ancestorId === candidateId) return true;
|
|
4754
|
+
const block = doc[ancestorId];
|
|
4755
|
+
if (!block) return false;
|
|
4756
|
+
const direct = [];
|
|
4757
|
+
if (block.type === "EmailLayout") direct.push(...(_b = (_a = block.data) == null ? void 0 : _a.childrenIds) != null ? _b : []);
|
|
4758
|
+
if (block.type === "Container") direct.push(...(_e = (_d = (_c = block.data) == null ? void 0 : _c.props) == null ? void 0 : _d.childrenIds) != null ? _e : []);
|
|
4759
|
+
if (block.type === "ColumnsContainer") {
|
|
4760
|
+
for (const col of (_h = (_g = (_f = block.data) == null ? void 0 : _f.props) == null ? void 0 : _g.columns) != null ? _h : []) {
|
|
4761
|
+
direct.push(...(_i = col.childrenIds) != null ? _i : []);
|
|
4762
|
+
}
|
|
4763
|
+
}
|
|
4764
|
+
for (const childId of direct) {
|
|
4765
|
+
if (isDescendant(doc, childId, candidateId)) return true;
|
|
4766
|
+
}
|
|
4767
|
+
return false;
|
|
4768
|
+
}
|
|
4769
|
+
function buildMovePatch(doc, sourceId, sourceParent, targetParent, targetIndex) {
|
|
4770
|
+
var _a, _b, _c;
|
|
4771
|
+
if (isDescendant(doc, sourceId, targetParent.parentId)) return null;
|
|
4772
|
+
const srcIds = getChildrenIds(doc, sourceParent);
|
|
4773
|
+
const sourceIndex = srcIds.indexOf(sourceId);
|
|
4774
|
+
if (sourceIndex < 0) return null;
|
|
4775
|
+
if (sameParent(sourceParent, targetParent)) {
|
|
4776
|
+
const arr = [...srcIds];
|
|
4777
|
+
arr.splice(sourceIndex, 1);
|
|
4778
|
+
let insertAt2 = targetIndex;
|
|
4779
|
+
if (insertAt2 > sourceIndex) insertAt2 -= 1;
|
|
4780
|
+
if (insertAt2 < 0) insertAt2 = 0;
|
|
4781
|
+
if (insertAt2 > arr.length) insertAt2 = arr.length;
|
|
4782
|
+
arr.splice(insertAt2, 0, sourceId);
|
|
4783
|
+
if (arr.every((id, i) => id === srcIds[i])) return null;
|
|
4784
|
+
const sourceBlock2 = doc[sourceParent.parentId];
|
|
4785
|
+
return {
|
|
4786
|
+
[sourceParent.parentId]: patchChildrenIds(sourceBlock2, sourceParent, arr)
|
|
4787
|
+
};
|
|
4788
|
+
}
|
|
4789
|
+
const newSrcIds = [...srcIds];
|
|
4790
|
+
newSrcIds.splice(sourceIndex, 1);
|
|
4791
|
+
const tgtIds = getChildrenIds(doc, targetParent);
|
|
4792
|
+
const newTgtIds = [...tgtIds];
|
|
4793
|
+
let insertAt = targetIndex;
|
|
4794
|
+
if (insertAt < 0) insertAt = 0;
|
|
4795
|
+
if (insertAt > newTgtIds.length) insertAt = newTgtIds.length;
|
|
4796
|
+
newTgtIds.splice(insertAt, 0, sourceId);
|
|
4797
|
+
if (sourceParent.parentId === targetParent.parentId) {
|
|
4798
|
+
const block = doc[sourceParent.parentId];
|
|
4799
|
+
const columns = ((_c = (_b = (_a = block.data) == null ? void 0 : _a.props) == null ? void 0 : _b.columns) != null ? _c : []).map((c, i) => {
|
|
4800
|
+
if (sourceParent.kind === "ColumnsContainer" && i === sourceParent.columnIndex) {
|
|
4801
|
+
return __spreadProps(__spreadValues({}, c), { childrenIds: newSrcIds });
|
|
4802
|
+
}
|
|
4803
|
+
if (targetParent.kind === "ColumnsContainer" && i === targetParent.columnIndex) {
|
|
4804
|
+
return __spreadProps(__spreadValues({}, c), { childrenIds: newTgtIds });
|
|
4805
|
+
}
|
|
4806
|
+
return c;
|
|
4807
|
+
});
|
|
4808
|
+
return {
|
|
4809
|
+
[sourceParent.parentId]: __spreadProps(__spreadValues({}, block), {
|
|
4810
|
+
data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { columns }) })
|
|
4811
|
+
})
|
|
4812
|
+
};
|
|
4813
|
+
}
|
|
4814
|
+
const sourceBlock = doc[sourceParent.parentId];
|
|
4815
|
+
const targetBlock = doc[targetParent.parentId];
|
|
4816
|
+
return {
|
|
4817
|
+
[sourceParent.parentId]: patchChildrenIds(sourceBlock, sourceParent, newSrcIds),
|
|
4818
|
+
[targetParent.parentId]: patchChildrenIds(targetBlock, targetParent, newTgtIds)
|
|
4819
|
+
};
|
|
4820
|
+
}
|
|
4821
|
+
|
|
4822
|
+
// src/app/templates-drawer/outline-panel.tsx
|
|
4823
|
+
var ROOT_BLOCK_ID2 = "root";
|
|
4824
|
+
var PREVIEW_MAX = 36;
|
|
4825
|
+
function iconForType(type) {
|
|
4826
|
+
switch (type) {
|
|
4827
|
+
case "EmailLayout":
|
|
4828
|
+
return /* @__PURE__ */ React62.createElement(DashboardOutlined, { fontSize: "small" });
|
|
4829
|
+
case "Heading":
|
|
4830
|
+
return /* @__PURE__ */ React62.createElement(HMobiledataOutlined, { fontSize: "small" });
|
|
4831
|
+
case "Text":
|
|
4832
|
+
return /* @__PURE__ */ React62.createElement(NotesOutlined, { fontSize: "small" });
|
|
4833
|
+
case "Button":
|
|
4834
|
+
return /* @__PURE__ */ React62.createElement(SmartButtonOutlined, { fontSize: "small" });
|
|
4835
|
+
case "Image":
|
|
4836
|
+
return /* @__PURE__ */ React62.createElement(ImageOutlined, { fontSize: "small" });
|
|
4837
|
+
case "Avatar":
|
|
4838
|
+
return /* @__PURE__ */ React62.createElement(AccountCircleOutlined, { fontSize: "small" });
|
|
4839
|
+
case "Signature":
|
|
4840
|
+
return /* @__PURE__ */ React62.createElement(ContactMailOutlined, { fontSize: "small" });
|
|
4841
|
+
case "Divider":
|
|
4842
|
+
return /* @__PURE__ */ React62.createElement(HorizontalRuleOutlined, { fontSize: "small" });
|
|
4843
|
+
case "Spacer":
|
|
4844
|
+
return /* @__PURE__ */ React62.createElement(Crop32Outlined, { fontSize: "small" });
|
|
4845
|
+
case "Html":
|
|
4846
|
+
return /* @__PURE__ */ React62.createElement(HtmlOutlined, { fontSize: "small" });
|
|
4847
|
+
case "Container":
|
|
4848
|
+
return /* @__PURE__ */ React62.createElement(LibraryAddOutlined, { fontSize: "small" });
|
|
4849
|
+
case "ColumnsContainer":
|
|
4850
|
+
return /* @__PURE__ */ React62.createElement(ViewColumnOutlined, { fontSize: "small" });
|
|
4851
|
+
default:
|
|
4852
|
+
return /* @__PURE__ */ React62.createElement(BusinessOutlined, { fontSize: "small" });
|
|
4853
|
+
}
|
|
4854
|
+
}
|
|
4855
|
+
function previewText(text) {
|
|
4856
|
+
if (!text) return void 0;
|
|
4857
|
+
const trimmed = text.trim().replace(/\s+/g, " ");
|
|
4858
|
+
if (!trimmed) return void 0;
|
|
4859
|
+
return trimmed.length > PREVIEW_MAX ? trimmed.slice(0, PREVIEW_MAX - 1) + "\u2026" : trimmed;
|
|
4860
|
+
}
|
|
4861
|
+
function buildNode(id, doc, ctx) {
|
|
4862
|
+
var _a, _b, _c, _d, _e, _f;
|
|
4863
|
+
const block = doc[id];
|
|
4864
|
+
if (!block) return null;
|
|
4865
|
+
const type = block.type;
|
|
4866
|
+
const data = (_a = block.data) != null ? _a : {};
|
|
4867
|
+
const props = (_b = data.props) != null ? _b : {};
|
|
4868
|
+
const baseMeta = ctx ? { parent: ctx.parent, indexInParent: ctx.indexInParent, siblingsCount: ctx.siblingsCount } : {};
|
|
4869
|
+
switch (type) {
|
|
4870
|
+
case "EmailLayout": {
|
|
4871
|
+
const ids = (_c = data.childrenIds) != null ? _c : [];
|
|
4872
|
+
const parentForChildren = { kind: "EmailLayout", parentId: "root" };
|
|
4873
|
+
const children = ids.map(
|
|
4874
|
+
(childId, i) => buildNode(childId, doc, {
|
|
4875
|
+
parent: parentForChildren,
|
|
4876
|
+
indexInParent: i,
|
|
4877
|
+
siblingsCount: ids.length
|
|
4878
|
+
})
|
|
4879
|
+
).filter((n) => n !== null);
|
|
4880
|
+
return {
|
|
4881
|
+
id,
|
|
4882
|
+
label: "Canvas",
|
|
4883
|
+
icon: iconForType("EmailLayout"),
|
|
4884
|
+
children,
|
|
4885
|
+
containerChildrenRef: parentForChildren
|
|
4886
|
+
};
|
|
4887
|
+
}
|
|
4888
|
+
case "Container": {
|
|
4889
|
+
const ids = (_d = props.childrenIds) != null ? _d : [];
|
|
4890
|
+
const parentForChildren = { kind: "Container", parentId: id };
|
|
4891
|
+
const children = ids.map(
|
|
4892
|
+
(childId, i) => buildNode(childId, doc, {
|
|
4893
|
+
parent: parentForChildren,
|
|
4894
|
+
indexInParent: i,
|
|
4895
|
+
siblingsCount: ids.length
|
|
4896
|
+
})
|
|
4897
|
+
).filter((n) => n !== null);
|
|
4898
|
+
const count = children.length;
|
|
4899
|
+
return __spreadValues({
|
|
4900
|
+
id,
|
|
4901
|
+
label: "Container",
|
|
4902
|
+
preview: count === 1 ? "1 child" : `${count} children`,
|
|
4903
|
+
icon: iconForType("Container"),
|
|
4904
|
+
children,
|
|
4905
|
+
containerChildrenRef: parentForChildren
|
|
4906
|
+
}, baseMeta);
|
|
4907
|
+
}
|
|
4908
|
+
case "ColumnsContainer": {
|
|
4909
|
+
const columns = (_e = props.columns) != null ? _e : [];
|
|
4910
|
+
const children = [];
|
|
4911
|
+
columns.forEach((col, colIdx) => {
|
|
4912
|
+
var _a2;
|
|
4913
|
+
const colIds = (_a2 = col.childrenIds) != null ? _a2 : [];
|
|
4914
|
+
const parentForCol = {
|
|
4915
|
+
kind: "ColumnsContainer",
|
|
4916
|
+
parentId: id,
|
|
4917
|
+
columnIndex: colIdx
|
|
4918
|
+
};
|
|
4919
|
+
const colChildren = colIds.map(
|
|
4920
|
+
(childId, i) => buildNode(childId, doc, {
|
|
4921
|
+
parent: parentForCol,
|
|
4922
|
+
indexInParent: i,
|
|
4923
|
+
siblingsCount: colIds.length
|
|
4924
|
+
})
|
|
4925
|
+
).filter((n) => n !== null);
|
|
4926
|
+
children.push({
|
|
4927
|
+
id: `${id}::col${colIdx}`,
|
|
4928
|
+
label: `Column ${colIdx + 1}`,
|
|
4929
|
+
preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
|
|
4930
|
+
icon: /* @__PURE__ */ React62.createElement(ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
|
|
4931
|
+
children: colChildren,
|
|
4932
|
+
containerChildrenRef: parentForCol
|
|
4933
|
+
});
|
|
4934
|
+
});
|
|
4935
|
+
return __spreadValues({
|
|
4936
|
+
id,
|
|
4937
|
+
label: "Columns",
|
|
4938
|
+
preview: `${columns.length} columns`,
|
|
4939
|
+
icon: iconForType("ColumnsContainer"),
|
|
4940
|
+
children
|
|
4941
|
+
}, baseMeta);
|
|
4942
|
+
}
|
|
4943
|
+
case "Text":
|
|
4944
|
+
case "Heading":
|
|
4945
|
+
case "Button":
|
|
4946
|
+
return __spreadValues({ id, label: type, preview: previewText(props.text), icon: iconForType(type) }, baseMeta);
|
|
4947
|
+
case "Html":
|
|
4948
|
+
return __spreadValues({ id, label: "Html", preview: previewText(props.contents), icon: iconForType("Html") }, baseMeta);
|
|
4949
|
+
case "Image":
|
|
4950
|
+
return __spreadValues({
|
|
4951
|
+
id,
|
|
4952
|
+
label: "Image",
|
|
4953
|
+
preview: (_f = previewText(props.alt)) != null ? _f : previewText(props.url),
|
|
4954
|
+
icon: iconForType("Image")
|
|
4955
|
+
}, baseMeta);
|
|
4956
|
+
case "Avatar":
|
|
4957
|
+
return __spreadValues({ id, label: "Avatar", preview: previewText(props.imageUrl), icon: iconForType("Avatar") }, baseMeta);
|
|
4958
|
+
case "Divider":
|
|
4959
|
+
return __spreadValues({ id, label: "Divider", icon: iconForType("Divider") }, baseMeta);
|
|
4960
|
+
case "Spacer":
|
|
4961
|
+
return __spreadValues({
|
|
4962
|
+
id,
|
|
4963
|
+
label: "Spacer",
|
|
4964
|
+
preview: props.height ? `${props.height}px` : void 0,
|
|
4965
|
+
icon: iconForType("Spacer")
|
|
4966
|
+
}, baseMeta);
|
|
4967
|
+
case "Signature":
|
|
4968
|
+
return __spreadValues({ id, label: "Signature", preview: previewText(props.name), icon: iconForType("Signature") }, baseMeta);
|
|
4969
|
+
default:
|
|
4970
|
+
return __spreadValues({ id, label: type, icon: iconForType(type) }, baseMeta);
|
|
4971
|
+
}
|
|
4972
|
+
}
|
|
4973
|
+
var DRAG_MIME = "application/x-email-editor-block";
|
|
4974
|
+
function OutlinePanel() {
|
|
4975
|
+
const document2 = useDocument();
|
|
4976
|
+
const selectedBlockId = useSelectedBlockId();
|
|
4977
|
+
const [dragging, setDragging] = useState(null);
|
|
4978
|
+
const tree = buildNode(ROOT_BLOCK_ID2, document2);
|
|
4979
|
+
const performMove = (payload, targetParent, targetIndex) => {
|
|
4980
|
+
const patch = buildMovePatch(
|
|
4981
|
+
document2,
|
|
4982
|
+
payload.sourceId,
|
|
4983
|
+
payload.sourceParent,
|
|
4984
|
+
targetParent,
|
|
4985
|
+
targetIndex
|
|
4986
|
+
);
|
|
4987
|
+
if (patch) {
|
|
4988
|
+
setDocument(patch);
|
|
4989
|
+
setSelectedBlockId(payload.sourceId);
|
|
4990
|
+
}
|
|
4991
|
+
};
|
|
4992
|
+
return /* @__PURE__ */ React62.createElement(Box, null, /* @__PURE__ */ React62.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5, px: 0.5 } }, "Outline"), /* @__PURE__ */ React62.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__ */ React62.createElement(
|
|
4993
|
+
OutlineRow,
|
|
4994
|
+
{
|
|
4995
|
+
node: tree,
|
|
4996
|
+
depth: 0,
|
|
4997
|
+
selectedBlockId,
|
|
4998
|
+
document: document2,
|
|
4999
|
+
dragging,
|
|
5000
|
+
setDragging,
|
|
5001
|
+
performMove
|
|
5002
|
+
}
|
|
5003
|
+
) : /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
|
|
5004
|
+
}
|
|
5005
|
+
function OutlineRow({
|
|
5006
|
+
node,
|
|
5007
|
+
depth,
|
|
5008
|
+
selectedBlockId,
|
|
5009
|
+
document: document2,
|
|
5010
|
+
dragging,
|
|
5011
|
+
setDragging,
|
|
5012
|
+
performMove
|
|
5013
|
+
}) {
|
|
5014
|
+
const [expanded, setExpanded] = useState(true);
|
|
5015
|
+
const [dropPos, setDropPos] = useState(null);
|
|
5016
|
+
const hasChildren = Boolean(node.children && node.children.length > 0);
|
|
5017
|
+
const isSelectable = !node.id.includes("::");
|
|
5018
|
+
const isSelected = isSelectable && selectedBlockId === node.id;
|
|
5019
|
+
const canMove = isSelectable && node.parent !== void 0 && node.indexInParent !== void 0 && node.siblingsCount !== void 0;
|
|
5020
|
+
const canMoveUp = canMove && node.indexInParent > 0;
|
|
5021
|
+
const canMoveDown = canMove && node.indexInParent < node.siblingsCount - 1;
|
|
5022
|
+
const isDragSource = (dragging == null ? void 0 : dragging.sourceId) === node.id;
|
|
5023
|
+
const draggable = canMove;
|
|
5024
|
+
const handleDragStart = (e) => {
|
|
5025
|
+
if (!draggable || !node.parent) return;
|
|
5026
|
+
const payload = { sourceId: node.id, sourceParent: node.parent };
|
|
5027
|
+
e.dataTransfer.setData(DRAG_MIME, JSON.stringify(payload));
|
|
5028
|
+
e.dataTransfer.setData("text/plain", node.label);
|
|
5029
|
+
e.dataTransfer.effectAllowed = "move";
|
|
5030
|
+
setDragging(payload);
|
|
5031
|
+
};
|
|
5032
|
+
const handleDragEnd = () => setDragging(null);
|
|
5033
|
+
const computeDropPos = (e) => {
|
|
5034
|
+
if (!dragging) return null;
|
|
5035
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
5036
|
+
const y = e.clientY - rect.top;
|
|
5037
|
+
const h = rect.height || 28;
|
|
5038
|
+
const canDropInside = Boolean(node.containerChildrenRef);
|
|
5039
|
+
if (canDropInside && y > h * 0.25 && y < h * 0.75) return "inside";
|
|
5040
|
+
if (y < h * 0.5) return "before";
|
|
5041
|
+
return "after";
|
|
5042
|
+
};
|
|
5043
|
+
const handleDragOver = (e) => {
|
|
5044
|
+
if (!dragging) return;
|
|
5045
|
+
if (dragging.sourceId === node.id) {
|
|
5046
|
+
setDropPos(null);
|
|
5047
|
+
return;
|
|
5048
|
+
}
|
|
5049
|
+
if (node.containerChildrenRef && isDescendant(document2, dragging.sourceId, node.id)) {
|
|
5050
|
+
setDropPos(null);
|
|
5051
|
+
return;
|
|
5052
|
+
}
|
|
5053
|
+
const pos = computeDropPos(e);
|
|
5054
|
+
if (!pos) {
|
|
5055
|
+
setDropPos(null);
|
|
5056
|
+
return;
|
|
5057
|
+
}
|
|
5058
|
+
if ((pos === "before" || pos === "after") && !node.parent) {
|
|
5059
|
+
setDropPos(null);
|
|
5060
|
+
return;
|
|
5061
|
+
}
|
|
5062
|
+
e.preventDefault();
|
|
5063
|
+
e.dataTransfer.dropEffect = "move";
|
|
5064
|
+
setDropPos(pos);
|
|
5065
|
+
};
|
|
5066
|
+
const handleDragLeave = () => setDropPos(null);
|
|
5067
|
+
const handleDrop = (e) => {
|
|
5068
|
+
if (!dragging || !dropPos) return;
|
|
5069
|
+
e.preventDefault();
|
|
5070
|
+
let targetParent;
|
|
5071
|
+
let targetIndex = 0;
|
|
5072
|
+
if (dropPos === "inside" && node.containerChildrenRef) {
|
|
5073
|
+
targetParent = node.containerChildrenRef;
|
|
5074
|
+
targetIndex = Number.MAX_SAFE_INTEGER;
|
|
5075
|
+
} else if ((dropPos === "before" || dropPos === "after") && node.parent) {
|
|
5076
|
+
targetParent = node.parent;
|
|
5077
|
+
targetIndex = node.indexInParent + (dropPos === "after" ? 1 : 0);
|
|
5078
|
+
}
|
|
5079
|
+
if (targetParent) performMove(dragging, targetParent, targetIndex);
|
|
5080
|
+
setDropPos(null);
|
|
5081
|
+
setDragging(null);
|
|
5082
|
+
};
|
|
5083
|
+
const handleMove = (delta) => {
|
|
5084
|
+
if (!canMove || !node.parent) return;
|
|
5085
|
+
const nextIndex = node.indexInParent + delta;
|
|
5086
|
+
const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
|
|
5087
|
+
if (patch) setDocument(patch);
|
|
5088
|
+
};
|
|
5089
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(Box, { sx: { position: "relative" } }, dropPos === "before" && /* @__PURE__ */ React62.createElement(DropLine, { depth }), /* @__PURE__ */ React62.createElement(
|
|
5090
|
+
Stack,
|
|
5091
|
+
{
|
|
5092
|
+
direction: "row",
|
|
5093
|
+
alignItems: "center",
|
|
5094
|
+
spacing: 0.5,
|
|
5095
|
+
draggable,
|
|
5096
|
+
onDragStart: handleDragStart,
|
|
5097
|
+
onDragEnd: handleDragEnd,
|
|
5098
|
+
onDragOver: handleDragOver,
|
|
5099
|
+
onDragLeave: handleDragLeave,
|
|
5100
|
+
onDrop: handleDrop,
|
|
5101
|
+
onClick: () => isSelectable && setSelectedBlockId(node.id),
|
|
5102
|
+
onMouseEnter: () => isSelectable && !dragging && setHoveredBlockId(node.id),
|
|
5103
|
+
onMouseLeave: () => isSelectable && setHoveredBlockId(null),
|
|
5104
|
+
sx: {
|
|
5105
|
+
pl: `${depth * 12 + 4}px`,
|
|
5106
|
+
pr: 0.5,
|
|
5107
|
+
py: 0.25,
|
|
5108
|
+
minHeight: 28,
|
|
5109
|
+
borderRadius: 0.75,
|
|
5110
|
+
cursor: isSelectable ? draggable ? "grab" : "pointer" : "default",
|
|
5111
|
+
backgroundColor: isSelected ? "action.selected" : dropPos === "inside" ? "rgba(25, 118, 210, 0.12)" : "transparent",
|
|
5112
|
+
opacity: isDragSource ? 0.5 : 1,
|
|
5113
|
+
outline: dropPos === "inside" ? "1.5px solid rgba(25, 118, 210, 0.7)" : void 0,
|
|
5114
|
+
transition: "background-color 80ms, outline-color 80ms",
|
|
5115
|
+
"&:hover": {
|
|
5116
|
+
backgroundColor: isSelected ? "action.selected" : "action.hover"
|
|
4634
5117
|
},
|
|
4635
|
-
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4643
|
-
|
|
4644
|
-
|
|
5118
|
+
"&:hover .outline-move-btns": { opacity: 1 },
|
|
5119
|
+
userSelect: "none"
|
|
5120
|
+
}
|
|
5121
|
+
},
|
|
5122
|
+
hasChildren ? /* @__PURE__ */ React62.createElement(
|
|
5123
|
+
Box,
|
|
5124
|
+
{
|
|
5125
|
+
role: "button",
|
|
5126
|
+
"aria-label": expanded ? "Collapse" : "Expand",
|
|
5127
|
+
onClick: (e) => {
|
|
5128
|
+
e.stopPropagation();
|
|
5129
|
+
setExpanded((v) => !v);
|
|
4645
5130
|
},
|
|
4646
|
-
|
|
4647
|
-
|
|
4648
|
-
|
|
5131
|
+
sx: { display: "flex", alignItems: "center", cursor: "pointer" }
|
|
5132
|
+
},
|
|
5133
|
+
expanded ? /* @__PURE__ */ React62.createElement(ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React62.createElement(ChevronRight, { fontSize: "small" })
|
|
5134
|
+
) : /* @__PURE__ */ React62.createElement(Box, { sx: { width: 20 } }),
|
|
5135
|
+
/* @__PURE__ */ React62.createElement(
|
|
5136
|
+
Box,
|
|
5137
|
+
{
|
|
5138
|
+
sx: {
|
|
5139
|
+
display: "flex",
|
|
5140
|
+
alignItems: "center",
|
|
5141
|
+
color: isSelected ? "primary.main" : "text.secondary",
|
|
5142
|
+
flexShrink: 0
|
|
5143
|
+
}
|
|
5144
|
+
},
|
|
5145
|
+
node.icon
|
|
5146
|
+
),
|
|
5147
|
+
/* @__PURE__ */ React62.createElement(
|
|
5148
|
+
Typography,
|
|
5149
|
+
{
|
|
5150
|
+
variant: "body2",
|
|
5151
|
+
sx: {
|
|
5152
|
+
fontWeight: 600,
|
|
5153
|
+
color: isSelected ? "primary.main" : "text.primary",
|
|
5154
|
+
flexShrink: 0
|
|
5155
|
+
}
|
|
5156
|
+
},
|
|
5157
|
+
node.label
|
|
5158
|
+
),
|
|
5159
|
+
node.preview && /* @__PURE__ */ React62.createElement(
|
|
5160
|
+
Typography,
|
|
5161
|
+
{
|
|
5162
|
+
variant: "body2",
|
|
5163
|
+
sx: {
|
|
5164
|
+
color: "text.secondary",
|
|
5165
|
+
overflow: "hidden",
|
|
5166
|
+
textOverflow: "ellipsis",
|
|
5167
|
+
whiteSpace: "nowrap",
|
|
5168
|
+
flex: 1,
|
|
5169
|
+
minWidth: 0
|
|
5170
|
+
}
|
|
5171
|
+
},
|
|
5172
|
+
"\u2014 ",
|
|
5173
|
+
node.preview
|
|
5174
|
+
),
|
|
5175
|
+
canMove && /* @__PURE__ */ React62.createElement(
|
|
5176
|
+
Box,
|
|
5177
|
+
{
|
|
5178
|
+
className: "outline-move-btns",
|
|
5179
|
+
sx: {
|
|
5180
|
+
display: "flex",
|
|
5181
|
+
ml: "auto",
|
|
5182
|
+
opacity: isSelected ? 1 : 0,
|
|
5183
|
+
transition: "opacity 120ms"
|
|
5184
|
+
}
|
|
5185
|
+
},
|
|
5186
|
+
/* @__PURE__ */ React62.createElement(Tooltip, { title: "Move up" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
|
|
4649
5187
|
IconButton,
|
|
4650
5188
|
{
|
|
4651
5189
|
size: "small",
|
|
5190
|
+
disabled: !canMoveUp,
|
|
4652
5191
|
onClick: (e) => {
|
|
4653
|
-
|
|
4654
|
-
|
|
4655
|
-
}
|
|
5192
|
+
e.stopPropagation();
|
|
5193
|
+
handleMove(-1);
|
|
5194
|
+
},
|
|
5195
|
+
"aria-label": `Move ${node.label} up`,
|
|
5196
|
+
sx: { p: 0.25 }
|
|
4656
5197
|
},
|
|
4657
|
-
/* @__PURE__ */
|
|
4658
|
-
)),
|
|
4659
|
-
|
|
5198
|
+
/* @__PURE__ */ React62.createElement(KeyboardArrowUp, { fontSize: "small" })
|
|
5199
|
+
))),
|
|
5200
|
+
/* @__PURE__ */ React62.createElement(Tooltip, { title: "Move down" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
|
|
4660
5201
|
IconButton,
|
|
4661
5202
|
{
|
|
4662
5203
|
size: "small",
|
|
5204
|
+
disabled: !canMoveDown,
|
|
4663
5205
|
onClick: (e) => {
|
|
4664
|
-
|
|
4665
|
-
|
|
4666
|
-
}
|
|
5206
|
+
e.stopPropagation();
|
|
5207
|
+
handleMove(1);
|
|
5208
|
+
},
|
|
5209
|
+
"aria-label": `Move ${node.label} down`,
|
|
5210
|
+
sx: { p: 0.25 }
|
|
4667
5211
|
},
|
|
4668
|
-
/* @__PURE__ */
|
|
4669
|
-
))
|
|
5212
|
+
/* @__PURE__ */ React62.createElement(KeyboardArrowDown, { fontSize: "small" })
|
|
5213
|
+
)))
|
|
5214
|
+
)
|
|
5215
|
+
), dropPos === "after" && /* @__PURE__ */ React62.createElement(DropLine, { depth })), hasChildren && expanded && /* @__PURE__ */ React62.createElement(Box, null, node.children.map((child) => /* @__PURE__ */ React62.createElement(
|
|
5216
|
+
OutlineRow,
|
|
5217
|
+
{
|
|
5218
|
+
key: child.id,
|
|
5219
|
+
node: child,
|
|
5220
|
+
depth: depth + 1,
|
|
5221
|
+
selectedBlockId,
|
|
5222
|
+
document: document2,
|
|
5223
|
+
dragging,
|
|
5224
|
+
setDragging,
|
|
5225
|
+
performMove
|
|
5226
|
+
}
|
|
5227
|
+
))));
|
|
5228
|
+
}
|
|
5229
|
+
function DropLine({ depth }) {
|
|
5230
|
+
return /* @__PURE__ */ React62.createElement(
|
|
5231
|
+
Box,
|
|
5232
|
+
{
|
|
5233
|
+
sx: {
|
|
5234
|
+
position: "relative",
|
|
5235
|
+
height: 0
|
|
5236
|
+
}
|
|
5237
|
+
},
|
|
5238
|
+
/* @__PURE__ */ React62.createElement(
|
|
5239
|
+
Box,
|
|
5240
|
+
{
|
|
5241
|
+
sx: {
|
|
5242
|
+
position: "absolute",
|
|
5243
|
+
left: `${depth * 12 + 24}px`,
|
|
5244
|
+
right: 4,
|
|
5245
|
+
top: -1,
|
|
5246
|
+
height: 2,
|
|
5247
|
+
backgroundColor: "primary.main",
|
|
5248
|
+
borderRadius: 1,
|
|
5249
|
+
pointerEvents: "none"
|
|
5250
|
+
}
|
|
5251
|
+
}
|
|
4670
5252
|
)
|
|
4671
5253
|
);
|
|
4672
5254
|
}
|
|
5255
|
+
function NewTemplatePickerDialog({
|
|
5256
|
+
open,
|
|
5257
|
+
kind,
|
|
5258
|
+
samples,
|
|
5259
|
+
existingSlugs,
|
|
5260
|
+
defaultName,
|
|
5261
|
+
onClose,
|
|
5262
|
+
onCreate
|
|
5263
|
+
}) {
|
|
5264
|
+
const [name, setName] = useState("");
|
|
5265
|
+
const [selectedStarter, setSelectedStarter] = useState(null);
|
|
5266
|
+
const [error, setError] = useState(null);
|
|
5267
|
+
const [busy, setBusy] = useState(false);
|
|
5268
|
+
useEffect(() => {
|
|
5269
|
+
if (open) {
|
|
5270
|
+
setName(defaultName != null ? defaultName : kind === "sample" ? "New sample" : "New template");
|
|
5271
|
+
setSelectedStarter(null);
|
|
5272
|
+
setError(null);
|
|
5273
|
+
setBusy(false);
|
|
5274
|
+
}
|
|
5275
|
+
}, [open, defaultName, kind]);
|
|
5276
|
+
const validate = () => {
|
|
5277
|
+
const trimmed = name.trim();
|
|
5278
|
+
if (!trimmed) return "Name is required";
|
|
5279
|
+
if (existingSlugs.some((s) => s.toLowerCase() === trimmed.toLowerCase())) {
|
|
5280
|
+
return kind === "sample" ? "A sample with this name already exists" : "A template with this name already exists";
|
|
5281
|
+
}
|
|
5282
|
+
return null;
|
|
5283
|
+
};
|
|
5284
|
+
const handleCreate = () => __async(null, null, function* () {
|
|
5285
|
+
const err = validate();
|
|
5286
|
+
if (err) {
|
|
5287
|
+
setError(err);
|
|
5288
|
+
return;
|
|
5289
|
+
}
|
|
5290
|
+
setBusy(true);
|
|
5291
|
+
try {
|
|
5292
|
+
const ok = yield onCreate(name.trim(), selectedStarter);
|
|
5293
|
+
if (ok) onClose();
|
|
5294
|
+
} finally {
|
|
5295
|
+
setBusy(false);
|
|
5296
|
+
}
|
|
5297
|
+
});
|
|
5298
|
+
const pickable = samples.filter((s) => s.id !== "empty-email");
|
|
5299
|
+
return /* @__PURE__ */ React62.createElement(Dialog, { open, onClose: busy ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React62.createElement(DialogTitle, null, kind === "sample" ? "New sample" : "New template"), /* @__PURE__ */ React62.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React62.createElement(Typography, { variant: "subtitle2", sx: { mb: 1 } }, "Start from"), /* @__PURE__ */ React62.createElement(
|
|
5300
|
+
List,
|
|
5301
|
+
{
|
|
5302
|
+
dense: true,
|
|
5303
|
+
sx: {
|
|
5304
|
+
mb: 2,
|
|
5305
|
+
border: 1,
|
|
5306
|
+
borderColor: "divider",
|
|
5307
|
+
borderRadius: 1,
|
|
5308
|
+
py: 0,
|
|
5309
|
+
maxHeight: 260,
|
|
5310
|
+
overflowY: "auto"
|
|
5311
|
+
}
|
|
5312
|
+
},
|
|
5313
|
+
/* @__PURE__ */ React62.createElement(
|
|
5314
|
+
ListItemButton,
|
|
5315
|
+
{
|
|
5316
|
+
selected: selectedStarter === null,
|
|
5317
|
+
onClick: () => setSelectedStarter(null)
|
|
5318
|
+
},
|
|
5319
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React62.createElement(InsertDriveFileOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React62.createElement(ListItemText, { primary: "Blank", secondary: "Start from an empty email" }))
|
|
5320
|
+
),
|
|
5321
|
+
pickable.map((s) => /* @__PURE__ */ React62.createElement(
|
|
5322
|
+
ListItemButton,
|
|
5323
|
+
{
|
|
5324
|
+
key: s.id,
|
|
5325
|
+
selected: selectedStarter === s.id,
|
|
5326
|
+
onClick: () => setSelectedStarter(s.id)
|
|
5327
|
+
},
|
|
5328
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React62.createElement(DescriptionOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React62.createElement(ListItemText, { primary: s.slug, secondary: s.description }))
|
|
5329
|
+
))
|
|
5330
|
+
), /* @__PURE__ */ React62.createElement(
|
|
5331
|
+
TextField,
|
|
5332
|
+
{
|
|
5333
|
+
autoFocus: true,
|
|
5334
|
+
fullWidth: true,
|
|
5335
|
+
size: "small",
|
|
5336
|
+
label: "Name",
|
|
5337
|
+
value: name,
|
|
5338
|
+
onChange: (e) => {
|
|
5339
|
+
setName(e.target.value);
|
|
5340
|
+
if (error) setError(null);
|
|
5341
|
+
},
|
|
5342
|
+
onKeyDown: (e) => {
|
|
5343
|
+
if (e.key === "Enter" && !busy) void handleCreate();
|
|
5344
|
+
},
|
|
5345
|
+
error: Boolean(error),
|
|
5346
|
+
helperText: error != null ? error : " ",
|
|
5347
|
+
disabled: busy
|
|
5348
|
+
}
|
|
5349
|
+
)), /* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: onClose, disabled: busy }, "Cancel"), /* @__PURE__ */ React62.createElement(Button$1, { variant: "contained", onClick: handleCreate, disabled: busy }, busy ? "Creating\u2026" : `Create ${kind}`)));
|
|
5350
|
+
}
|
|
4673
5351
|
function RenameDialog({
|
|
4674
5352
|
open,
|
|
4675
5353
|
currentSlug,
|
|
5354
|
+
currentTags = [],
|
|
4676
5355
|
existingSlugs,
|
|
4677
5356
|
onClose,
|
|
4678
5357
|
onSubmit
|
|
4679
5358
|
}) {
|
|
4680
|
-
const [
|
|
5359
|
+
const [slug, setSlug] = useState(currentSlug);
|
|
5360
|
+
const [tags, setTags] = useState(currentTags);
|
|
5361
|
+
const [tagInput, setTagInput] = useState("");
|
|
4681
5362
|
const [error, setError] = useState(null);
|
|
4682
5363
|
const [submitting, setSubmitting] = useState(false);
|
|
4683
5364
|
useEffect(() => {
|
|
4684
5365
|
if (open) {
|
|
4685
|
-
|
|
5366
|
+
setSlug(currentSlug);
|
|
5367
|
+
setTags(currentTags);
|
|
5368
|
+
setTagInput("");
|
|
4686
5369
|
setError(null);
|
|
4687
5370
|
setSubmitting(false);
|
|
4688
5371
|
}
|
|
4689
|
-
}, [open, currentSlug]);
|
|
4690
|
-
const
|
|
4691
|
-
|
|
4692
|
-
|
|
5372
|
+
}, [open, currentSlug, currentTags]);
|
|
5373
|
+
const addTag = () => {
|
|
5374
|
+
const trimmed = tagInput.trim();
|
|
5375
|
+
if (!trimmed) return;
|
|
5376
|
+
if (tags.some((t) => t.toLowerCase() === trimmed.toLowerCase())) {
|
|
5377
|
+
setTagInput("");
|
|
5378
|
+
return;
|
|
5379
|
+
}
|
|
5380
|
+
setTags([...tags, trimmed]);
|
|
5381
|
+
setTagInput("");
|
|
4693
5382
|
};
|
|
5383
|
+
const removeTag = (tag) => setTags(tags.filter((t) => t !== tag));
|
|
5384
|
+
const tagsUnchanged = tags.length === currentTags.length && tags.every((t, i) => t === currentTags[i]);
|
|
4694
5385
|
const handleSubmit = () => __async(null, null, function* () {
|
|
4695
|
-
const
|
|
4696
|
-
if (!
|
|
5386
|
+
const trimmedSlug = slug.trim();
|
|
5387
|
+
if (!trimmedSlug) {
|
|
4697
5388
|
setError("Please enter a name");
|
|
4698
5389
|
return;
|
|
4699
5390
|
}
|
|
4700
|
-
|
|
4701
|
-
|
|
5391
|
+
const slugChanged = trimmedSlug !== currentSlug;
|
|
5392
|
+
if (slugChanged && existingSlugs.some((s) => s.toLowerCase() === trimmedSlug.toLowerCase())) {
|
|
5393
|
+
setError("A template with this name already exists");
|
|
4702
5394
|
return;
|
|
4703
5395
|
}
|
|
4704
|
-
if (
|
|
4705
|
-
|
|
5396
|
+
if (!slugChanged && tagsUnchanged) {
|
|
5397
|
+
onClose();
|
|
4706
5398
|
return;
|
|
4707
5399
|
}
|
|
4708
5400
|
setSubmitting(true);
|
|
4709
5401
|
try {
|
|
4710
|
-
yield onSubmit(
|
|
5402
|
+
yield onSubmit(trimmedSlug, { tags });
|
|
4711
5403
|
onClose();
|
|
4712
5404
|
} catch (e) {
|
|
4713
|
-
console.error("Error
|
|
4714
|
-
setError("Failed to
|
|
5405
|
+
console.error("Error updating template details:", e);
|
|
5406
|
+
setError("Failed to update template details");
|
|
4715
5407
|
} finally {
|
|
4716
5408
|
setSubmitting(false);
|
|
4717
5409
|
}
|
|
4718
5410
|
});
|
|
4719
|
-
return /* @__PURE__ */
|
|
5411
|
+
return /* @__PURE__ */ React62.createElement(Dialog, { open, onClose: submitting ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React62.createElement(DialogTitle, null, "Edit details"), /* @__PURE__ */ React62.createElement(DialogContent, null, /* @__PURE__ */ React62.createElement(
|
|
4720
5412
|
TextField,
|
|
4721
5413
|
{
|
|
4722
5414
|
autoFocus: true,
|
|
4723
5415
|
margin: "dense",
|
|
4724
|
-
label: "
|
|
5416
|
+
label: "Name",
|
|
4725
5417
|
fullWidth: true,
|
|
4726
5418
|
variant: "outlined",
|
|
4727
|
-
value,
|
|
4728
|
-
onChange:
|
|
5419
|
+
value: slug,
|
|
5420
|
+
onChange: (e) => {
|
|
5421
|
+
setSlug(e.target.value);
|
|
5422
|
+
setError(null);
|
|
5423
|
+
},
|
|
4729
5424
|
error: !!error,
|
|
4730
|
-
helperText: error,
|
|
5425
|
+
helperText: error != null ? error : " ",
|
|
4731
5426
|
disabled: submitting,
|
|
4732
5427
|
onKeyPress: (e) => {
|
|
4733
|
-
if (e.key === "Enter" && !submitting)
|
|
4734
|
-
|
|
5428
|
+
if (e.key === "Enter" && !submitting) handleSubmit();
|
|
5429
|
+
}
|
|
5430
|
+
}
|
|
5431
|
+
), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 1, mb: 0.5 } }, "Tags"), tags.length > 0 ? /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React62.createElement(
|
|
5432
|
+
Chip,
|
|
5433
|
+
{
|
|
5434
|
+
key: tag,
|
|
5435
|
+
label: tag,
|
|
5436
|
+
size: "small",
|
|
5437
|
+
onDelete: submitting ? void 0 : () => removeTag(tag)
|
|
5438
|
+
}
|
|
5439
|
+
))) : /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, "No tags yet. Suggested: ", /* @__PURE__ */ React62.createElement("i", null, "transactional"), ", ", /* @__PURE__ */ React62.createElement("i", null, "marketing"), "."), /* @__PURE__ */ React62.createElement(
|
|
5440
|
+
TextField,
|
|
5441
|
+
{
|
|
5442
|
+
size: "small",
|
|
5443
|
+
fullWidth: true,
|
|
5444
|
+
placeholder: "Add a tag and press Enter",
|
|
5445
|
+
value: tagInput,
|
|
5446
|
+
onChange: (e) => setTagInput(e.target.value),
|
|
5447
|
+
disabled: submitting,
|
|
5448
|
+
onKeyDown: (e) => {
|
|
5449
|
+
if (e.key === "Enter" || e.key === ",") {
|
|
5450
|
+
e.preventDefault();
|
|
5451
|
+
addTag();
|
|
5452
|
+
} else if (e.key === "Backspace" && !tagInput && tags.length > 0) {
|
|
5453
|
+
e.preventDefault();
|
|
5454
|
+
removeTag(tags[tags.length - 1]);
|
|
4735
5455
|
}
|
|
5456
|
+
},
|
|
5457
|
+
InputProps: {
|
|
5458
|
+
endAdornment: /* @__PURE__ */ React62.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React62.createElement(
|
|
5459
|
+
Button$1,
|
|
5460
|
+
{
|
|
5461
|
+
size: "small",
|
|
5462
|
+
onClick: addTag,
|
|
5463
|
+
disabled: !tagInput.trim() || submitting,
|
|
5464
|
+
startIcon: /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" }),
|
|
5465
|
+
sx: { textTransform: "none" }
|
|
5466
|
+
},
|
|
5467
|
+
"Add"
|
|
5468
|
+
))
|
|
4736
5469
|
}
|
|
4737
5470
|
}
|
|
4738
|
-
)), /* @__PURE__ */
|
|
5471
|
+
), /* @__PURE__ */ React62.createElement(Box, { sx: { minHeight: 8 } })), /* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React62.createElement(
|
|
4739
5472
|
Button$1,
|
|
4740
5473
|
{
|
|
4741
5474
|
onClick: handleSubmit,
|
|
4742
5475
|
variant: "contained",
|
|
4743
|
-
disabled: !
|
|
5476
|
+
disabled: !slug.trim() || submitting
|
|
4744
5477
|
},
|
|
4745
|
-
submitting ? "
|
|
5478
|
+
submitting ? "Saving\u2026" : "Save"
|
|
4746
5479
|
)));
|
|
4747
5480
|
}
|
|
4748
5481
|
function SaveTemplateDialog({
|
|
@@ -4804,7 +5537,7 @@ function SaveTemplateDialog({
|
|
|
4804
5537
|
setInternalError("");
|
|
4805
5538
|
onClose();
|
|
4806
5539
|
};
|
|
4807
|
-
return /* @__PURE__ */
|
|
5540
|
+
return /* @__PURE__ */ React62.createElement(
|
|
4808
5541
|
Dialog,
|
|
4809
5542
|
{
|
|
4810
5543
|
open,
|
|
@@ -4812,8 +5545,8 @@ function SaveTemplateDialog({
|
|
|
4812
5545
|
maxWidth: "sm",
|
|
4813
5546
|
fullWidth: true
|
|
4814
5547
|
},
|
|
4815
|
-
/* @__PURE__ */
|
|
4816
|
-
/* @__PURE__ */
|
|
5548
|
+
/* @__PURE__ */ React62.createElement(DialogTitle, null, "Save Email Template"),
|
|
5549
|
+
/* @__PURE__ */ React62.createElement(DialogContent, null, /* @__PURE__ */ React62.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React62.createElement(
|
|
4817
5550
|
TextField,
|
|
4818
5551
|
{
|
|
4819
5552
|
autoFocus: true,
|
|
@@ -4835,7 +5568,7 @@ function SaveTemplateDialog({
|
|
|
4835
5568
|
disabled: isSubmitting
|
|
4836
5569
|
}
|
|
4837
5570
|
))),
|
|
4838
|
-
/* @__PURE__ */
|
|
5571
|
+
/* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React62.createElement(
|
|
4839
5572
|
Button$1,
|
|
4840
5573
|
{
|
|
4841
5574
|
onClick: handleSave,
|
|
@@ -4901,7 +5634,7 @@ function SamplesDrawer({
|
|
|
4901
5634
|
setTemplateKind,
|
|
4902
5635
|
saveAs
|
|
4903
5636
|
}) {
|
|
4904
|
-
var _a;
|
|
5637
|
+
var _a, _b;
|
|
4905
5638
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
4906
5639
|
const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
|
|
4907
5640
|
const { showMessage } = useSnackbar();
|
|
@@ -4910,12 +5643,14 @@ function SamplesDrawer({
|
|
|
4910
5643
|
const [loadingSamples, setLoadingSamples] = useState(false);
|
|
4911
5644
|
const [loadingTemplates, setLoadingTemplates] = useState(false);
|
|
4912
5645
|
const [templatesError, setTemplatesError] = useState(null);
|
|
5646
|
+
const [activeLeftTab, setActiveLeftTab] = useState("templates");
|
|
4913
5647
|
const [search, setSearch] = useState("");
|
|
4914
5648
|
const [sortKey, setSortKey] = useState("updatedAt");
|
|
4915
5649
|
const [activeTags, setActiveTags] = useState([]);
|
|
4916
5650
|
const [renameTarget, setRenameTarget] = useState(null);
|
|
4917
5651
|
const [pendingSaveAs, setPendingSaveAs] = useState(null);
|
|
4918
5652
|
const [newError, setNewError] = useState(null);
|
|
5653
|
+
const [pickerKind, setPickerKind] = useState(null);
|
|
4919
5654
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
4920
5655
|
if (templateId === "empty-email") {
|
|
4921
5656
|
return empty_email_message_default;
|
|
@@ -4975,27 +5710,34 @@ function SamplesDrawer({
|
|
|
4975
5710
|
};
|
|
4976
5711
|
}, [samples, templates]);
|
|
4977
5712
|
const allTags = useMemo(() => {
|
|
4978
|
-
var _a2;
|
|
5713
|
+
var _a2, _b2;
|
|
4979
5714
|
const set = /* @__PURE__ */ new Set();
|
|
4980
|
-
for (const t of templateRows)
|
|
4981
|
-
|
|
4982
|
-
}
|
|
5715
|
+
for (const t of templateRows) (_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
5716
|
+
for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
|
|
4983
5717
|
return Array.from(set).sort();
|
|
4984
|
-
}, [templateRows]);
|
|
4985
|
-
const
|
|
5718
|
+
}, [templateRows, sampleRows]);
|
|
5719
|
+
const matchesSearchAndTags = useMemo(() => {
|
|
4986
5720
|
const term = search.trim().toLowerCase();
|
|
4987
|
-
|
|
4988
|
-
if (
|
|
4989
|
-
|
|
4990
|
-
|
|
4991
|
-
|
|
4992
|
-
|
|
4993
|
-
|
|
4994
|
-
|
|
4995
|
-
|
|
5721
|
+
return (t) => {
|
|
5722
|
+
if (term) {
|
|
5723
|
+
const haystack = [t.slug, t.description, t.subject].filter(Boolean).join(" ").toLowerCase();
|
|
5724
|
+
if (!haystack.includes(term)) return false;
|
|
5725
|
+
}
|
|
5726
|
+
if (activeTags.length > 0) {
|
|
5727
|
+
if (!t.tags || t.tags.length === 0) return false;
|
|
5728
|
+
if (!activeTags.every((tag) => t.tags.includes(tag))) return false;
|
|
5729
|
+
}
|
|
5730
|
+
return true;
|
|
4996
5731
|
};
|
|
4997
|
-
|
|
4998
|
-
|
|
5732
|
+
}, [search, activeTags]);
|
|
5733
|
+
const filteredTemplates = useMemo(
|
|
5734
|
+
() => templateRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
5735
|
+
[templateRows, matchesSearchAndTags, sortKey]
|
|
5736
|
+
);
|
|
5737
|
+
const filteredSamples = useMemo(
|
|
5738
|
+
() => sampleRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
5739
|
+
[sampleRows, matchesSearchAndTags, sortKey]
|
|
5740
|
+
);
|
|
4999
5741
|
const toggleTag = (tag) => {
|
|
5000
5742
|
setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
|
|
5001
5743
|
};
|
|
@@ -5022,16 +5764,19 @@ function SamplesDrawer({
|
|
|
5022
5764
|
deleteTemplate(template.id);
|
|
5023
5765
|
showMessage("Template deleted");
|
|
5024
5766
|
};
|
|
5025
|
-
const handleRenameSubmit = (newSlug) => __async(null, null, function* () {
|
|
5767
|
+
const handleRenameSubmit = (newSlug, opts) => __async(null, null, function* () {
|
|
5026
5768
|
if (!renameTarget || !renameTemplate) return;
|
|
5027
|
-
yield renameTemplate(renameTarget.id, newSlug);
|
|
5028
|
-
|
|
5029
|
-
|
|
5030
|
-
|
|
5769
|
+
yield renameTemplate(renameTarget.id, newSlug, opts);
|
|
5770
|
+
const patch = (t) => {
|
|
5771
|
+
var _a2;
|
|
5772
|
+
return t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : t.tags }) : t;
|
|
5773
|
+
};
|
|
5774
|
+
setTemplates((prev) => prev.map(patch));
|
|
5775
|
+
setSamples((prev) => prev.map(patch));
|
|
5031
5776
|
if (currentTemplateId === renameTarget.id) {
|
|
5032
5777
|
setCurrentTemplate(renameTarget.id, newSlug);
|
|
5033
5778
|
}
|
|
5034
|
-
showMessage("
|
|
5779
|
+
showMessage("Details saved");
|
|
5035
5780
|
});
|
|
5036
5781
|
const flipKindLocally = (id, kind) => {
|
|
5037
5782
|
setTemplates((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
|
|
@@ -5093,15 +5838,48 @@ function SamplesDrawer({
|
|
|
5093
5838
|
return false;
|
|
5094
5839
|
}
|
|
5095
5840
|
});
|
|
5096
|
-
const
|
|
5097
|
-
|
|
5098
|
-
setPendingSaveAs({ content: empty_email_message_default, defaultName: "New Template" });
|
|
5841
|
+
const openNewPicker = (kind) => {
|
|
5842
|
+
setPickerKind(kind);
|
|
5099
5843
|
};
|
|
5844
|
+
const handleCreateFromPicker = (name, starterId) => __async(null, null, function* () {
|
|
5845
|
+
if (!saveAs) return false;
|
|
5846
|
+
const kind = pickerKind != null ? pickerKind : "template";
|
|
5847
|
+
try {
|
|
5848
|
+
let content = empty_email_message_default;
|
|
5849
|
+
if (starterId !== null) {
|
|
5850
|
+
content = yield handleLoadTemplate(starterId);
|
|
5851
|
+
if (!content) {
|
|
5852
|
+
showMessage("Could not load the selected sample");
|
|
5853
|
+
return false;
|
|
5854
|
+
}
|
|
5855
|
+
}
|
|
5856
|
+
const { id, slug } = yield saveAs(name, buildSavePayload(content));
|
|
5857
|
+
if (kind === "sample" && setTemplateKind) {
|
|
5858
|
+
try {
|
|
5859
|
+
yield setTemplateKind(id, "sample");
|
|
5860
|
+
flipKindLocally(id, "sample");
|
|
5861
|
+
} catch (e) {
|
|
5862
|
+
console.error("Failed to mark new row as sample:", e);
|
|
5863
|
+
}
|
|
5864
|
+
}
|
|
5865
|
+
resetDocument(content);
|
|
5866
|
+
setCurrentTemplate(id, slug, kind);
|
|
5867
|
+
ctxLoadTemplate(content, id, slug, kind);
|
|
5868
|
+
showMessage(kind === "sample" ? "New sample created" : "New template created");
|
|
5869
|
+
window.location.hash = `#template/${id}`;
|
|
5870
|
+
yield refreshTemplates();
|
|
5871
|
+
return true;
|
|
5872
|
+
} catch (e) {
|
|
5873
|
+
console.error("Error creating:", e);
|
|
5874
|
+
showMessage("Error creating");
|
|
5875
|
+
return false;
|
|
5876
|
+
}
|
|
5877
|
+
});
|
|
5100
5878
|
if (!enabled) {
|
|
5101
5879
|
return null;
|
|
5102
5880
|
}
|
|
5103
5881
|
const existingSlugs = templates.map((t) => t.slug);
|
|
5104
|
-
return /* @__PURE__ */
|
|
5882
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
5105
5883
|
Drawer,
|
|
5106
5884
|
{
|
|
5107
5885
|
variant: "persistent",
|
|
@@ -5116,7 +5894,7 @@ function SamplesDrawer({
|
|
|
5116
5894
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
5117
5895
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
5118
5896
|
},
|
|
5119
|
-
/* @__PURE__ */
|
|
5897
|
+
/* @__PURE__ */ React62.createElement(
|
|
5120
5898
|
Stack,
|
|
5121
5899
|
{
|
|
5122
5900
|
py: 1,
|
|
@@ -5126,27 +5904,39 @@ function SamplesDrawer({
|
|
|
5126
5904
|
spacing: 1.5,
|
|
5127
5905
|
sx: { overflowY: "auto" }
|
|
5128
5906
|
},
|
|
5129
|
-
/* @__PURE__ */
|
|
5907
|
+
/* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React62.createElement(Typography, { variant: "h6", component: "h1" }, "Library"), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React62.createElement(Tooltip, { title: activeLeftTab === "samples" ? "New sample" : "New template" }, /* @__PURE__ */ React62.createElement(
|
|
5130
5908
|
IconButton,
|
|
5131
5909
|
{
|
|
5132
5910
|
size: "small",
|
|
5133
|
-
onClick:
|
|
5134
|
-
"aria-label": "New template"
|
|
5911
|
+
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
5912
|
+
"aria-label": activeLeftTab === "samples" ? "New sample" : "New template"
|
|
5135
5913
|
},
|
|
5136
|
-
/* @__PURE__ */
|
|
5914
|
+
/* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" })
|
|
5137
5915
|
))),
|
|
5138
|
-
|
|
5916
|
+
/* @__PURE__ */ React62.createElement(
|
|
5917
|
+
Tabs,
|
|
5918
|
+
{
|
|
5919
|
+
value: activeLeftTab,
|
|
5920
|
+
onChange: (_, v) => setActiveLeftTab(v),
|
|
5921
|
+
variant: "fullWidth",
|
|
5922
|
+
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
5923
|
+
},
|
|
5924
|
+
/* @__PURE__ */ React62.createElement(Tab, { value: "templates", label: "Templates", disabled: !loadTemplates }),
|
|
5925
|
+
/* @__PURE__ */ React62.createElement(Tab, { value: "samples", label: "Samples" }),
|
|
5926
|
+
/* @__PURE__ */ React62.createElement(Tab, { value: "outline", label: "Outline" })
|
|
5927
|
+
),
|
|
5928
|
+
activeLeftTab === "outline" ? /* @__PURE__ */ React62.createElement(OutlinePanel, null) : /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
5139
5929
|
TextField,
|
|
5140
5930
|
{
|
|
5141
5931
|
size: "small",
|
|
5142
|
-
placeholder: "Search templates",
|
|
5932
|
+
placeholder: activeLeftTab === "templates" ? "Search templates" : "Search samples",
|
|
5143
5933
|
value: search,
|
|
5144
5934
|
onChange: (e) => setSearch(e.target.value),
|
|
5145
5935
|
InputProps: {
|
|
5146
|
-
startAdornment: /* @__PURE__ */
|
|
5936
|
+
startAdornment: /* @__PURE__ */ React62.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React62.createElement(SearchOutlined, { fontSize: "small" }))
|
|
5147
5937
|
}
|
|
5148
5938
|
}
|
|
5149
|
-
), /* @__PURE__ */
|
|
5939
|
+
), /* @__PURE__ */ React62.createElement(
|
|
5150
5940
|
TextField,
|
|
5151
5941
|
{
|
|
5152
5942
|
select: true,
|
|
@@ -5155,8 +5945,18 @@ function SamplesDrawer({
|
|
|
5155
5945
|
value: sortKey,
|
|
5156
5946
|
onChange: (e) => setSortKey(e.target.value)
|
|
5157
5947
|
},
|
|
5158
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
5159
|
-
), allTags.length > 0 && /* @__PURE__ */
|
|
5948
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React62.createElement(MenuItem, { key: opt.value, value: opt.value }, opt.label))
|
|
5949
|
+
), allTags.length > 0 && /* @__PURE__ */ React62.createElement(Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React62.createElement(
|
|
5950
|
+
Chip,
|
|
5951
|
+
{
|
|
5952
|
+
label: "All",
|
|
5953
|
+
size: "small",
|
|
5954
|
+
clickable: true,
|
|
5955
|
+
color: activeTags.length === 0 ? "primary" : "default",
|
|
5956
|
+
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
5957
|
+
onClick: () => setActiveTags([])
|
|
5958
|
+
}
|
|
5959
|
+
), allTags.map((tag) => /* @__PURE__ */ React62.createElement(
|
|
5160
5960
|
Chip,
|
|
5161
5961
|
{
|
|
5162
5962
|
key: tag,
|
|
@@ -5167,7 +5967,7 @@ function SamplesDrawer({
|
|
|
5167
5967
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
5168
5968
|
onClick: () => toggleTag(tag)
|
|
5169
5969
|
}
|
|
5170
|
-
))),
|
|
5970
|
+
))), activeLeftTab === "templates" ? /* @__PURE__ */ React62.createElement(Box, null, loadingTemplates ? /* @__PURE__ */ React62.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React62.createElement(CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React62.createElement(Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React62.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React62.createElement(
|
|
5171
5971
|
TemplateRow,
|
|
5172
5972
|
{
|
|
5173
5973
|
key: template.id,
|
|
@@ -5179,8 +5979,7 @@ function SamplesDrawer({
|
|
|
5179
5979
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
5180
5980
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
5181
5981
|
}
|
|
5182
|
-
))) : /* @__PURE__ */
|
|
5183
|
-
/* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Sample Templates"), loadingSamples ? /* @__PURE__ */ React58.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React58.createElement(CircularProgress, { size: 24 })) : sampleRows.length > 0 ? /* @__PURE__ */ React58.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, sampleRows.map((sample) => /* @__PURE__ */ React58.createElement(
|
|
5982
|
+
))) : /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")) : /* @__PURE__ */ React62.createElement(Box, null, loadingSamples ? /* @__PURE__ */ React62.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React62.createElement(CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React62.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React62.createElement(
|
|
5184
5983
|
TemplateRow,
|
|
5185
5984
|
{
|
|
5186
5985
|
key: sample.id,
|
|
@@ -5188,20 +5987,23 @@ function SamplesDrawer({
|
|
|
5188
5987
|
isCurrent: currentTemplateId === sample.id,
|
|
5189
5988
|
templateLoader: () => handleLoadTemplate(sample.id),
|
|
5190
5989
|
onDuplicateAsTemplate: saveAs ? () => handleDuplicateAsTemplate(sample) : void 0,
|
|
5191
|
-
|
|
5990
|
+
onRename: renameTemplate ? () => setRenameTarget(sample) : void 0,
|
|
5991
|
+
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
5992
|
+
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
5192
5993
|
}
|
|
5193
|
-
))) : /* @__PURE__ */
|
|
5994
|
+
))) : /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? "No samples available" : "No samples match your filters")))
|
|
5194
5995
|
)
|
|
5195
|
-
), renameTarget && /* @__PURE__ */
|
|
5996
|
+
), renameTarget && /* @__PURE__ */ React62.createElement(
|
|
5196
5997
|
RenameDialog,
|
|
5197
5998
|
{
|
|
5198
5999
|
open: !!renameTarget,
|
|
5199
6000
|
currentSlug: renameTarget.slug,
|
|
6001
|
+
currentTags: (_a = renameTarget.tags) != null ? _a : [],
|
|
5200
6002
|
existingSlugs: existingSlugs.filter((s) => s !== renameTarget.slug),
|
|
5201
6003
|
onClose: () => setRenameTarget(null),
|
|
5202
6004
|
onSubmit: handleRenameSubmit
|
|
5203
6005
|
}
|
|
5204
|
-
), /* @__PURE__ */
|
|
6006
|
+
), /* @__PURE__ */ React62.createElement(
|
|
5205
6007
|
SaveTemplateDialog,
|
|
5206
6008
|
{
|
|
5207
6009
|
open: !!pendingSaveAs,
|
|
@@ -5211,9 +6013,19 @@ function SamplesDrawer({
|
|
|
5211
6013
|
},
|
|
5212
6014
|
onSave: handleSaveAsSubmit,
|
|
5213
6015
|
onNameChange: () => setNewError(null),
|
|
5214
|
-
defaultName: (
|
|
6016
|
+
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
5215
6017
|
error: newError
|
|
5216
6018
|
}
|
|
6019
|
+
), /* @__PURE__ */ React62.createElement(
|
|
6020
|
+
NewTemplatePickerDialog,
|
|
6021
|
+
{
|
|
6022
|
+
open: pickerKind !== null,
|
|
6023
|
+
kind: pickerKind != null ? pickerKind : "template",
|
|
6024
|
+
samples: sampleRows,
|
|
6025
|
+
existingSlugs: pickerKind === "sample" ? sampleRows.map((s) => s.slug) : templateRows.map((t) => t.slug),
|
|
6026
|
+
onClose: () => setPickerKind(null),
|
|
6027
|
+
onCreate: handleCreateFromPicker
|
|
6028
|
+
}
|
|
5217
6029
|
));
|
|
5218
6030
|
}
|
|
5219
6031
|
var BUTTON_SX2 = { p: 1.5, display: "flex", flexDirection: "column" };
|
|
@@ -5228,7 +6040,7 @@ var ICON_SX = {
|
|
|
5228
6040
|
borderColor: "cadet.300"
|
|
5229
6041
|
};
|
|
5230
6042
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
5231
|
-
return /* @__PURE__ */
|
|
6043
|
+
return /* @__PURE__ */ React62.createElement(
|
|
5232
6044
|
Button$1,
|
|
5233
6045
|
{
|
|
5234
6046
|
sx: BUTTON_SX2,
|
|
@@ -5237,14 +6049,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
5237
6049
|
onClick();
|
|
5238
6050
|
}
|
|
5239
6051
|
},
|
|
5240
|
-
/* @__PURE__ */
|
|
5241
|
-
/* @__PURE__ */
|
|
6052
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: ICON_SX }, icon),
|
|
6053
|
+
/* @__PURE__ */ React62.createElement(Typography, { variant: "body2" }, label)
|
|
5242
6054
|
);
|
|
5243
6055
|
}
|
|
5244
6056
|
var BUTTONS = [
|
|
5245
6057
|
{
|
|
5246
6058
|
label: "Heading",
|
|
5247
|
-
icon: /* @__PURE__ */
|
|
6059
|
+
icon: /* @__PURE__ */ React62.createElement(HMobiledataOutlined, null),
|
|
5248
6060
|
block: () => ({
|
|
5249
6061
|
type: "Heading",
|
|
5250
6062
|
data: {
|
|
@@ -5257,7 +6069,7 @@ var BUTTONS = [
|
|
|
5257
6069
|
},
|
|
5258
6070
|
{
|
|
5259
6071
|
label: "Text",
|
|
5260
|
-
icon: /* @__PURE__ */
|
|
6072
|
+
icon: /* @__PURE__ */ React62.createElement(NotesOutlined, null),
|
|
5261
6073
|
block: () => ({
|
|
5262
6074
|
type: "Text",
|
|
5263
6075
|
data: {
|
|
@@ -5271,7 +6083,7 @@ var BUTTONS = [
|
|
|
5271
6083
|
},
|
|
5272
6084
|
{
|
|
5273
6085
|
label: "Button",
|
|
5274
|
-
icon: /* @__PURE__ */
|
|
6086
|
+
icon: /* @__PURE__ */ React62.createElement(SmartButtonOutlined, null),
|
|
5275
6087
|
block: () => ({
|
|
5276
6088
|
type: "Button",
|
|
5277
6089
|
data: {
|
|
@@ -5285,7 +6097,7 @@ var BUTTONS = [
|
|
|
5285
6097
|
},
|
|
5286
6098
|
{
|
|
5287
6099
|
label: "Image",
|
|
5288
|
-
icon: /* @__PURE__ */
|
|
6100
|
+
icon: /* @__PURE__ */ React62.createElement(ImageOutlined, null),
|
|
5289
6101
|
block: () => ({
|
|
5290
6102
|
type: "Image",
|
|
5291
6103
|
data: {
|
|
@@ -5301,7 +6113,7 @@ var BUTTONS = [
|
|
|
5301
6113
|
},
|
|
5302
6114
|
{
|
|
5303
6115
|
label: "Avatar",
|
|
5304
|
-
icon: /* @__PURE__ */
|
|
6116
|
+
icon: /* @__PURE__ */ React62.createElement(AccountCircleOutlined, null),
|
|
5305
6117
|
block: () => ({
|
|
5306
6118
|
type: "Avatar",
|
|
5307
6119
|
data: {
|
|
@@ -5315,7 +6127,7 @@ var BUTTONS = [
|
|
|
5315
6127
|
},
|
|
5316
6128
|
{
|
|
5317
6129
|
label: "Personal Signature",
|
|
5318
|
-
icon: /* @__PURE__ */
|
|
6130
|
+
icon: /* @__PURE__ */ React62.createElement(ContactMailOutlined, null),
|
|
5319
6131
|
block: () => ({
|
|
5320
6132
|
type: "Signature",
|
|
5321
6133
|
data: {
|
|
@@ -5337,7 +6149,7 @@ var BUTTONS = [
|
|
|
5337
6149
|
},
|
|
5338
6150
|
{
|
|
5339
6151
|
label: "Company Signature",
|
|
5340
|
-
icon: /* @__PURE__ */
|
|
6152
|
+
icon: /* @__PURE__ */ React62.createElement(BusinessOutlined, null),
|
|
5341
6153
|
block: () => ({
|
|
5342
6154
|
type: "Signature",
|
|
5343
6155
|
data: {
|
|
@@ -5357,7 +6169,7 @@ var BUTTONS = [
|
|
|
5357
6169
|
},
|
|
5358
6170
|
{
|
|
5359
6171
|
label: "Divider",
|
|
5360
|
-
icon: /* @__PURE__ */
|
|
6172
|
+
icon: /* @__PURE__ */ React62.createElement(HorizontalRuleOutlined, null),
|
|
5361
6173
|
block: () => ({
|
|
5362
6174
|
type: "Divider",
|
|
5363
6175
|
data: {
|
|
@@ -5370,7 +6182,7 @@ var BUTTONS = [
|
|
|
5370
6182
|
},
|
|
5371
6183
|
{
|
|
5372
6184
|
label: "Spacer",
|
|
5373
|
-
icon: /* @__PURE__ */
|
|
6185
|
+
icon: /* @__PURE__ */ React62.createElement(Crop32Outlined, null),
|
|
5374
6186
|
block: () => ({
|
|
5375
6187
|
type: "Spacer",
|
|
5376
6188
|
data: {}
|
|
@@ -5378,7 +6190,7 @@ var BUTTONS = [
|
|
|
5378
6190
|
},
|
|
5379
6191
|
{
|
|
5380
6192
|
label: "Html",
|
|
5381
|
-
icon: /* @__PURE__ */
|
|
6193
|
+
icon: /* @__PURE__ */ React62.createElement(HtmlOutlined, null),
|
|
5382
6194
|
block: () => ({
|
|
5383
6195
|
type: "Html",
|
|
5384
6196
|
data: {
|
|
@@ -5393,7 +6205,7 @@ var BUTTONS = [
|
|
|
5393
6205
|
},
|
|
5394
6206
|
{
|
|
5395
6207
|
label: "Columns",
|
|
5396
|
-
icon: /* @__PURE__ */
|
|
6208
|
+
icon: /* @__PURE__ */ React62.createElement(ViewColumnOutlined, null),
|
|
5397
6209
|
block: () => ({
|
|
5398
6210
|
type: "ColumnsContainer",
|
|
5399
6211
|
data: {
|
|
@@ -5408,7 +6220,7 @@ var BUTTONS = [
|
|
|
5408
6220
|
},
|
|
5409
6221
|
{
|
|
5410
6222
|
label: "Container",
|
|
5411
|
-
icon: /* @__PURE__ */
|
|
6223
|
+
icon: /* @__PURE__ */ React62.createElement(LibraryAddOutlined, null),
|
|
5412
6224
|
block: () => ({
|
|
5413
6225
|
type: "Container",
|
|
5414
6226
|
data: {
|
|
@@ -5432,7 +6244,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
5432
6244
|
if (anchorEl === null) {
|
|
5433
6245
|
return null;
|
|
5434
6246
|
}
|
|
5435
|
-
return /* @__PURE__ */
|
|
6247
|
+
return /* @__PURE__ */ React62.createElement(
|
|
5436
6248
|
Menu,
|
|
5437
6249
|
{
|
|
5438
6250
|
open: true,
|
|
@@ -5441,7 +6253,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
5441
6253
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
5442
6254
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
5443
6255
|
},
|
|
5444
|
-
/* @__PURE__ */
|
|
6256
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React62.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
|
|
5445
6257
|
);
|
|
5446
6258
|
}
|
|
5447
6259
|
function DividerButton({ buttonElement, onClick }) {
|
|
@@ -5468,7 +6280,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
5468
6280
|
window.removeEventListener("mousemove", listener);
|
|
5469
6281
|
};
|
|
5470
6282
|
}, [buttonElement, setVisible]);
|
|
5471
|
-
return /* @__PURE__ */
|
|
6283
|
+
return /* @__PURE__ */ React62.createElement(Fade, { in: visible }, /* @__PURE__ */ React62.createElement(
|
|
5472
6284
|
IconButton,
|
|
5473
6285
|
{
|
|
5474
6286
|
size: "small",
|
|
@@ -5491,11 +6303,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
5491
6303
|
onClick();
|
|
5492
6304
|
}
|
|
5493
6305
|
},
|
|
5494
|
-
/* @__PURE__ */
|
|
6306
|
+
/* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" })
|
|
5495
6307
|
));
|
|
5496
6308
|
}
|
|
5497
6309
|
function PlaceholderButton({ onClick }) {
|
|
5498
|
-
return /* @__PURE__ */
|
|
6310
|
+
return /* @__PURE__ */ React62.createElement(
|
|
5499
6311
|
ButtonBase,
|
|
5500
6312
|
{
|
|
5501
6313
|
onClick: (ev) => {
|
|
@@ -5511,7 +6323,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
5511
6323
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
5512
6324
|
}
|
|
5513
6325
|
},
|
|
5514
|
-
/* @__PURE__ */
|
|
6326
|
+
/* @__PURE__ */ React62.createElement(
|
|
5515
6327
|
AddOutlined,
|
|
5516
6328
|
{
|
|
5517
6329
|
sx: {
|
|
@@ -5535,19 +6347,29 @@ function AddBlockButton({ onSelect, placeholder }) {
|
|
|
5535
6347
|
};
|
|
5536
6348
|
const renderButton2 = () => {
|
|
5537
6349
|
if (placeholder) {
|
|
5538
|
-
return /* @__PURE__ */
|
|
6350
|
+
return /* @__PURE__ */ React62.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
5539
6351
|
} else {
|
|
5540
|
-
return /* @__PURE__ */
|
|
6352
|
+
return /* @__PURE__ */ React62.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
5541
6353
|
}
|
|
5542
6354
|
};
|
|
5543
|
-
return /* @__PURE__ */
|
|
6355
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React62.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
6356
|
+
}
|
|
6357
|
+
var BlockParentContext = createContext(null);
|
|
6358
|
+
function BlockParentProvider({
|
|
6359
|
+
info,
|
|
6360
|
+
children
|
|
6361
|
+
}) {
|
|
6362
|
+
return /* @__PURE__ */ React62.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6363
|
+
}
|
|
6364
|
+
function useBlockParent() {
|
|
6365
|
+
return useContext(BlockParentContext);
|
|
5544
6366
|
}
|
|
5545
6367
|
|
|
5546
6368
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
5547
6369
|
function generateId() {
|
|
5548
6370
|
return `block-${Date.now()}`;
|
|
5549
6371
|
}
|
|
5550
|
-
function EditorChildrenIds({ childrenIds, onChange }) {
|
|
6372
|
+
function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
5551
6373
|
const appendBlock = (block) => {
|
|
5552
6374
|
const blockId = generateId();
|
|
5553
6375
|
return onChange({
|
|
@@ -5567,9 +6389,62 @@ function EditorChildrenIds({ childrenIds, onChange }) {
|
|
|
5567
6389
|
});
|
|
5568
6390
|
};
|
|
5569
6391
|
if (!childrenIds || childrenIds.length === 0) {
|
|
5570
|
-
return /* @__PURE__ */
|
|
6392
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock }), parentRef && /* @__PURE__ */ React62.createElement(CanvasDropZone, { parentRef, targetIndex: 0, placeholder: true }));
|
|
5571
6393
|
}
|
|
5572
|
-
return /* @__PURE__ */
|
|
6394
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React62.createElement(Fragment, { key: childId }, /* @__PURE__ */ React62.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), parentRef && /* @__PURE__ */ React62.createElement(CanvasDropZone, { parentRef, targetIndex: i }), parentRef ? /* @__PURE__ */ React62.createElement(BlockParentProvider, { info: { parent: parentRef, indexInParent: i } }, /* @__PURE__ */ React62.createElement(EditorBlock, { id: childId })) : /* @__PURE__ */ React62.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React62.createElement(AddBlockButton, { onSelect: appendBlock }), parentRef && /* @__PURE__ */ React62.createElement(CanvasDropZone, { parentRef, targetIndex: childrenIds.length }));
|
|
6395
|
+
}
|
|
6396
|
+
function CanvasDropZone({
|
|
6397
|
+
parentRef,
|
|
6398
|
+
targetIndex,
|
|
6399
|
+
placeholder = false
|
|
6400
|
+
}) {
|
|
6401
|
+
const document2 = useDocument();
|
|
6402
|
+
const dragging = useDraggingBlock();
|
|
6403
|
+
const [over, setOver] = useState(false);
|
|
6404
|
+
if (!dragging) return null;
|
|
6405
|
+
if (isDescendant(document2, dragging.sourceId, parentRef.parentId)) return null;
|
|
6406
|
+
const handleDragOver = (e) => {
|
|
6407
|
+
e.preventDefault();
|
|
6408
|
+
e.dataTransfer.dropEffect = "move";
|
|
6409
|
+
setOver(true);
|
|
6410
|
+
};
|
|
6411
|
+
const handleDragLeave = () => setOver(false);
|
|
6412
|
+
const handleDrop = (e) => {
|
|
6413
|
+
e.preventDefault();
|
|
6414
|
+
e.stopPropagation();
|
|
6415
|
+
setOver(false);
|
|
6416
|
+
const payload = getDraggingBlock();
|
|
6417
|
+
if (!payload) return;
|
|
6418
|
+
const patch = buildMovePatch(
|
|
6419
|
+
document2,
|
|
6420
|
+
payload.sourceId,
|
|
6421
|
+
payload.sourceParent,
|
|
6422
|
+
parentRef,
|
|
6423
|
+
targetIndex
|
|
6424
|
+
);
|
|
6425
|
+
if (patch) {
|
|
6426
|
+
setDocument(patch);
|
|
6427
|
+
setSelectedBlockId(payload.sourceId);
|
|
6428
|
+
}
|
|
6429
|
+
setDraggingBlock(null);
|
|
6430
|
+
};
|
|
6431
|
+
return /* @__PURE__ */ React62.createElement(
|
|
6432
|
+
Box,
|
|
6433
|
+
{
|
|
6434
|
+
onDragOver: handleDragOver,
|
|
6435
|
+
onDragLeave: handleDragLeave,
|
|
6436
|
+
onDrop: handleDrop,
|
|
6437
|
+
sx: {
|
|
6438
|
+
height: placeholder ? 64 : over ? 16 : 8,
|
|
6439
|
+
mx: placeholder ? 2 : 3,
|
|
6440
|
+
my: placeholder ? 0 : over ? 0.5 : 0,
|
|
6441
|
+
borderRadius: 1,
|
|
6442
|
+
backgroundColor: over ? "rgba(25, 118, 210, 0.16)" : "transparent",
|
|
6443
|
+
outline: over ? "1.5px dashed rgba(25, 118, 210, 0.8)" : void 0,
|
|
6444
|
+
transition: "height 80ms, background-color 80ms, outline-color 80ms"
|
|
6445
|
+
}
|
|
6446
|
+
}
|
|
6447
|
+
);
|
|
5573
6448
|
}
|
|
5574
6449
|
|
|
5575
6450
|
// src/editor/blocks/columns-container/columns-container-editor.tsx
|
|
@@ -5596,15 +6471,36 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
5596
6471
|
});
|
|
5597
6472
|
setSelectedBlockId(blockId);
|
|
5598
6473
|
};
|
|
5599
|
-
return /* @__PURE__ */
|
|
6474
|
+
return /* @__PURE__ */ React62.createElement(
|
|
5600
6475
|
columns_container_default,
|
|
5601
6476
|
{
|
|
5602
6477
|
props: restProps,
|
|
5603
6478
|
style,
|
|
5604
6479
|
columns: [
|
|
5605
|
-
/* @__PURE__ */
|
|
5606
|
-
|
|
5607
|
-
|
|
6480
|
+
/* @__PURE__ */ React62.createElement(
|
|
6481
|
+
EditorChildrenIds,
|
|
6482
|
+
{
|
|
6483
|
+
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
6484
|
+
parentRef: { kind: "ColumnsContainer", parentId: currentBlockId, columnIndex: 0 },
|
|
6485
|
+
onChange: (change) => updateColumn(0, change)
|
|
6486
|
+
}
|
|
6487
|
+
),
|
|
6488
|
+
/* @__PURE__ */ React62.createElement(
|
|
6489
|
+
EditorChildrenIds,
|
|
6490
|
+
{
|
|
6491
|
+
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
6492
|
+
parentRef: { kind: "ColumnsContainer", parentId: currentBlockId, columnIndex: 1 },
|
|
6493
|
+
onChange: (change) => updateColumn(1, change)
|
|
6494
|
+
}
|
|
6495
|
+
),
|
|
6496
|
+
/* @__PURE__ */ React62.createElement(
|
|
6497
|
+
EditorChildrenIds,
|
|
6498
|
+
{
|
|
6499
|
+
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
6500
|
+
parentRef: { kind: "ColumnsContainer", parentId: currentBlockId, columnIndex: 2 },
|
|
6501
|
+
onChange: (change) => updateColumn(2, change)
|
|
6502
|
+
}
|
|
6503
|
+
)
|
|
5608
6504
|
]
|
|
5609
6505
|
}
|
|
5610
6506
|
);
|
|
@@ -5614,10 +6510,11 @@ function ContainerEditor({ style, props }) {
|
|
|
5614
6510
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
5615
6511
|
const document2 = useDocument();
|
|
5616
6512
|
const currentBlockId = useCurrentBlockId();
|
|
5617
|
-
return /* @__PURE__ */
|
|
6513
|
+
return /* @__PURE__ */ React62.createElement(container_default, { style }, /* @__PURE__ */ React62.createElement(
|
|
5618
6514
|
EditorChildrenIds,
|
|
5619
6515
|
{
|
|
5620
6516
|
childrenIds,
|
|
6517
|
+
parentRef: { kind: "Container", parentId: currentBlockId },
|
|
5621
6518
|
onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
|
|
5622
6519
|
setDocument({
|
|
5623
6520
|
[blockId]: block,
|
|
@@ -5814,10 +6711,11 @@ function EmailLayoutEditor(props) {
|
|
|
5814
6711
|
lineHeight: "1.5",
|
|
5815
6712
|
margin: "0"
|
|
5816
6713
|
};
|
|
5817
|
-
const editorChildren = /* @__PURE__ */
|
|
6714
|
+
const editorChildren = /* @__PURE__ */ React62.createElement(
|
|
5818
6715
|
EditorChildrenIds,
|
|
5819
6716
|
{
|
|
5820
6717
|
childrenIds,
|
|
6718
|
+
parentRef: { kind: "EmailLayout", parentId: "root" },
|
|
5821
6719
|
onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
|
|
5822
6720
|
setDocument({
|
|
5823
6721
|
[blockId]: block,
|
|
@@ -5832,61 +6730,87 @@ function EmailLayoutEditor(props) {
|
|
|
5832
6730
|
}
|
|
5833
6731
|
}
|
|
5834
6732
|
);
|
|
6733
|
+
const WORKSPACE_BG = "#e7e8ec";
|
|
6734
|
+
const CARD_MAX_WIDTH = 664;
|
|
6735
|
+
const cardStyle = {
|
|
6736
|
+
maxWidth: CARD_MAX_WIDTH,
|
|
6737
|
+
margin: "0 auto",
|
|
6738
|
+
borderRadius: 12,
|
|
6739
|
+
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
6740
|
+
};
|
|
5835
6741
|
if (props.backdropDisabled) {
|
|
5836
|
-
return /* @__PURE__ */
|
|
6742
|
+
return /* @__PURE__ */ React62.createElement(
|
|
5837
6743
|
"div",
|
|
5838
6744
|
{
|
|
5839
6745
|
onClick: () => {
|
|
5840
6746
|
setSelectedBlockId(null);
|
|
5841
6747
|
},
|
|
5842
6748
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
5843
|
-
backgroundColor:
|
|
6749
|
+
backgroundColor: WORKSPACE_BG,
|
|
5844
6750
|
padding: "32px",
|
|
5845
6751
|
width: "100%",
|
|
5846
6752
|
minHeight: "100%"
|
|
5847
6753
|
})
|
|
5848
6754
|
},
|
|
5849
|
-
/* @__PURE__ */
|
|
6755
|
+
/* @__PURE__ */ React62.createElement(
|
|
6756
|
+
"div",
|
|
6757
|
+
{
|
|
6758
|
+
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
6759
|
+
backgroundColor: "#F5F5F5",
|
|
6760
|
+
padding: "32px"
|
|
6761
|
+
})
|
|
6762
|
+
},
|
|
6763
|
+
/* @__PURE__ */ React62.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
6764
|
+
)
|
|
5850
6765
|
);
|
|
5851
6766
|
}
|
|
5852
|
-
return /* @__PURE__ */
|
|
6767
|
+
return /* @__PURE__ */ React62.createElement(
|
|
5853
6768
|
"div",
|
|
5854
6769
|
{
|
|
5855
6770
|
onClick: () => {
|
|
5856
6771
|
setSelectedBlockId(null);
|
|
5857
6772
|
},
|
|
5858
6773
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
5859
|
-
backgroundColor:
|
|
5860
|
-
padding: "32px
|
|
6774
|
+
backgroundColor: WORKSPACE_BG,
|
|
6775
|
+
padding: "32px 16px",
|
|
5861
6776
|
width: "100%",
|
|
5862
6777
|
minHeight: "100%"
|
|
5863
6778
|
})
|
|
5864
6779
|
},
|
|
5865
|
-
/* @__PURE__ */
|
|
5866
|
-
"
|
|
6780
|
+
/* @__PURE__ */ React62.createElement(
|
|
6781
|
+
"div",
|
|
5867
6782
|
{
|
|
5868
|
-
|
|
5869
|
-
|
|
5870
|
-
|
|
5871
|
-
|
|
5872
|
-
maxWidth: "600px",
|
|
5873
|
-
backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF",
|
|
5874
|
-
borderRadius: (_e = props.borderRadius) != null ? _e : void 0,
|
|
5875
|
-
overflow: props.borderRadius ? "hidden" : void 0,
|
|
5876
|
-
border: (() => {
|
|
5877
|
-
const v = props.borderColor;
|
|
5878
|
-
if (!v) {
|
|
5879
|
-
return void 0;
|
|
5880
|
-
}
|
|
5881
|
-
return `1px solid ${v}`;
|
|
5882
|
-
})()
|
|
5883
|
-
},
|
|
5884
|
-
role: "presentation",
|
|
5885
|
-
cellSpacing: "0",
|
|
5886
|
-
cellPadding: "0",
|
|
5887
|
-
border: 0
|
|
6783
|
+
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
6784
|
+
backgroundColor: (_c = props.backdropColor) != null ? _c : "#F5F5F5",
|
|
6785
|
+
padding: "32px 0"
|
|
6786
|
+
})
|
|
5888
6787
|
},
|
|
5889
|
-
/* @__PURE__ */
|
|
6788
|
+
/* @__PURE__ */ React62.createElement(
|
|
6789
|
+
"table",
|
|
6790
|
+
{
|
|
6791
|
+
align: "center",
|
|
6792
|
+
width: "100%",
|
|
6793
|
+
style: {
|
|
6794
|
+
margin: "0 auto",
|
|
6795
|
+
maxWidth: "600px",
|
|
6796
|
+
backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF",
|
|
6797
|
+
borderRadius: (_e = props.borderRadius) != null ? _e : void 0,
|
|
6798
|
+
overflow: props.borderRadius ? "hidden" : void 0,
|
|
6799
|
+
border: (() => {
|
|
6800
|
+
const v = props.borderColor;
|
|
6801
|
+
if (!v) {
|
|
6802
|
+
return void 0;
|
|
6803
|
+
}
|
|
6804
|
+
return `1px solid ${v}`;
|
|
6805
|
+
})()
|
|
6806
|
+
},
|
|
6807
|
+
role: "presentation",
|
|
6808
|
+
cellSpacing: "0",
|
|
6809
|
+
cellPadding: "0",
|
|
6810
|
+
border: 0
|
|
6811
|
+
},
|
|
6812
|
+
/* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement("td", null, editorChildren)))
|
|
6813
|
+
)
|
|
5890
6814
|
)
|
|
5891
6815
|
);
|
|
5892
6816
|
}
|
|
@@ -6045,34 +6969,54 @@ function TuneMenu({ blockId }) {
|
|
|
6045
6969
|
resetDocument(nDocument);
|
|
6046
6970
|
setSelectedBlockId(blockId);
|
|
6047
6971
|
};
|
|
6048
|
-
return /* @__PURE__ */
|
|
6972
|
+
return /* @__PURE__ */ React62.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React62.createElement(Stack, null, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(DeleteOutlined, { fontSize: "small" })))));
|
|
6049
6973
|
}
|
|
6050
6974
|
|
|
6051
6975
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
6052
6976
|
function EditorBlockWrapper({ children }) {
|
|
6053
6977
|
const selectedBlockId = useSelectedBlockId();
|
|
6978
|
+
const hoveredBlockId = useHoveredBlockId();
|
|
6979
|
+
const draggingBlock = useDraggingBlock();
|
|
6980
|
+
const blockParent = useBlockParent();
|
|
6054
6981
|
const [mouseInside, setMouseInside] = useState(false);
|
|
6055
6982
|
const blockId = useCurrentBlockId();
|
|
6983
|
+
const isBeingDragged = (draggingBlock == null ? void 0 : draggingBlock.sourceId) === blockId;
|
|
6056
6984
|
let outline;
|
|
6057
6985
|
if (selectedBlockId === blockId) {
|
|
6058
6986
|
outline = "2px solid rgba(0,121,204, 1)";
|
|
6059
|
-
} else if (mouseInside) {
|
|
6987
|
+
} else if (mouseInside && !draggingBlock || hoveredBlockId === blockId) {
|
|
6060
6988
|
outline = "2px solid rgba(0,121,204, 0.3)";
|
|
6061
6989
|
}
|
|
6062
6990
|
const renderMenu = () => {
|
|
6063
6991
|
if (selectedBlockId !== blockId) {
|
|
6064
6992
|
return null;
|
|
6065
6993
|
}
|
|
6066
|
-
return /* @__PURE__ */
|
|
6994
|
+
return /* @__PURE__ */ React62.createElement(TuneMenu, { blockId });
|
|
6995
|
+
};
|
|
6996
|
+
const draggable = Boolean(blockParent);
|
|
6997
|
+
const handleDragStart = (e) => {
|
|
6998
|
+
if (!blockParent) return;
|
|
6999
|
+
e.stopPropagation();
|
|
7000
|
+
e.dataTransfer.effectAllowed = "move";
|
|
7001
|
+
e.dataTransfer.setData("text/plain", blockId);
|
|
7002
|
+
setDraggingBlock({ sourceId: blockId, sourceParent: blockParent.parent });
|
|
7003
|
+
};
|
|
7004
|
+
const handleDragEnd = () => {
|
|
7005
|
+
setDraggingBlock(null);
|
|
6067
7006
|
};
|
|
6068
|
-
return /* @__PURE__ */
|
|
7007
|
+
return /* @__PURE__ */ React62.createElement(
|
|
6069
7008
|
Box,
|
|
6070
7009
|
{
|
|
7010
|
+
draggable,
|
|
7011
|
+
onDragStart: handleDragStart,
|
|
7012
|
+
onDragEnd: handleDragEnd,
|
|
6071
7013
|
sx: {
|
|
6072
7014
|
position: "relative",
|
|
6073
7015
|
maxWidth: "100%",
|
|
6074
7016
|
outlineOffset: "-1px",
|
|
6075
|
-
outline
|
|
7017
|
+
outline,
|
|
7018
|
+
opacity: isBeingDragged ? 0.4 : 1,
|
|
7019
|
+
cursor: draggable ? draggingBlock ? "grabbing" : "default" : "default"
|
|
6076
7020
|
},
|
|
6077
7021
|
onMouseEnter: (ev) => {
|
|
6078
7022
|
setMouseInside(true);
|
|
@@ -6205,7 +7149,7 @@ function ButtonEditor({ style, props }) {
|
|
|
6205
7149
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
6206
7150
|
});
|
|
6207
7151
|
};
|
|
6208
|
-
return /* @__PURE__ */
|
|
7152
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62.createElement(
|
|
6209
7153
|
"input",
|
|
6210
7154
|
{
|
|
6211
7155
|
type: "text",
|
|
@@ -6222,7 +7166,7 @@ function ButtonEditor({ style, props }) {
|
|
|
6222
7166
|
}
|
|
6223
7167
|
));
|
|
6224
7168
|
}
|
|
6225
|
-
return /* @__PURE__ */
|
|
7169
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, /* @__PURE__ */ React62.createElement("span", null, text)));
|
|
6226
7170
|
}
|
|
6227
7171
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
6228
7172
|
const textareaRef = useRef(null);
|
|
@@ -6366,7 +7310,7 @@ function InlineFormattingToolbar({
|
|
|
6366
7310
|
}
|
|
6367
7311
|
}, [linkPrompt]);
|
|
6368
7312
|
const preventBlur = (e) => e.preventDefault();
|
|
6369
|
-
return /* @__PURE__ */
|
|
7313
|
+
return /* @__PURE__ */ React62.createElement(Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React62.createElement(Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, linkPrompt ? /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React62.createElement(
|
|
6370
7314
|
TextField,
|
|
6371
7315
|
{
|
|
6372
7316
|
inputRef,
|
|
@@ -6388,7 +7332,7 @@ function InlineFormattingToolbar({
|
|
|
6388
7332
|
},
|
|
6389
7333
|
sx: { width: 220 }
|
|
6390
7334
|
}
|
|
6391
|
-
)) : /* @__PURE__ */
|
|
7335
|
+
)) : /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onBold, title: "Bold (Cmd+B)", "aria-label": "Bold" }, /* @__PURE__ */ React62.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onItalic, title: "Italic (Cmd+I)", "aria-label": "Italic" }, /* @__PURE__ */ React62.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: "Link (Cmd+K)", "aria-label": "Link" }, /* @__PURE__ */ React62.createElement(LinkOutlined, { fontSize: "small" })))));
|
|
6392
7336
|
}
|
|
6393
7337
|
|
|
6394
7338
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -6543,7 +7487,7 @@ function HeadingEditor({ style, props }) {
|
|
|
6543
7487
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
6544
7488
|
}, [localText, isSelected]);
|
|
6545
7489
|
if (isSelected) {
|
|
6546
|
-
return /* @__PURE__ */
|
|
7490
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
6547
7491
|
"textarea",
|
|
6548
7492
|
{
|
|
6549
7493
|
ref: textareaRef,
|
|
@@ -6561,7 +7505,7 @@ function HeadingEditor({ style, props }) {
|
|
|
6561
7505
|
rows: 1,
|
|
6562
7506
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
6563
7507
|
}
|
|
6564
|
-
), /* @__PURE__ */
|
|
7508
|
+
), /* @__PURE__ */ React62.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
6565
7509
|
}
|
|
6566
7510
|
const headingProps = isMarkdown ? {
|
|
6567
7511
|
ref: displayRef,
|
|
@@ -6570,11 +7514,11 @@ function HeadingEditor({ style, props }) {
|
|
|
6570
7514
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
6571
7515
|
switch (level) {
|
|
6572
7516
|
case "h1":
|
|
6573
|
-
return /* @__PURE__ */
|
|
7517
|
+
return /* @__PURE__ */ React62.createElement("h1", __spreadValues({}, headingProps));
|
|
6574
7518
|
case "h2":
|
|
6575
|
-
return /* @__PURE__ */
|
|
7519
|
+
return /* @__PURE__ */ React62.createElement("h2", __spreadValues({}, headingProps));
|
|
6576
7520
|
case "h3":
|
|
6577
|
-
return /* @__PURE__ */
|
|
7521
|
+
return /* @__PURE__ */ React62.createElement("h3", __spreadValues({}, headingProps));
|
|
6578
7522
|
}
|
|
6579
7523
|
}
|
|
6580
7524
|
function HtmlEditor({ style, props }) {
|
|
@@ -6639,7 +7583,7 @@ function HtmlEditor({ style, props }) {
|
|
|
6639
7583
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
6640
7584
|
});
|
|
6641
7585
|
};
|
|
6642
|
-
return /* @__PURE__ */
|
|
7586
|
+
return /* @__PURE__ */ React62.createElement("div", { style: cssStyle }, /* @__PURE__ */ React62.createElement(
|
|
6643
7587
|
"textarea",
|
|
6644
7588
|
{
|
|
6645
7589
|
value: localContents,
|
|
@@ -6659,9 +7603,9 @@ function HtmlEditor({ style, props }) {
|
|
|
6659
7603
|
));
|
|
6660
7604
|
}
|
|
6661
7605
|
if (!contents) {
|
|
6662
|
-
return /* @__PURE__ */
|
|
7606
|
+
return /* @__PURE__ */ React62.createElement("div", { style: cssStyle });
|
|
6663
7607
|
}
|
|
6664
|
-
return /* @__PURE__ */
|
|
7608
|
+
return /* @__PURE__ */ React62.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
6665
7609
|
}
|
|
6666
7610
|
function getImageBorderRadius2(shape, size) {
|
|
6667
7611
|
switch (shape) {
|
|
@@ -6776,7 +7720,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6776
7720
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
6777
7721
|
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
|
|
6778
7722
|
};
|
|
6779
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
7723
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React62.createElement(
|
|
6780
7724
|
"img",
|
|
6781
7725
|
{
|
|
6782
7726
|
src: imageUrl,
|
|
@@ -6794,7 +7738,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6794
7738
|
}
|
|
6795
7739
|
}
|
|
6796
7740
|
) : null;
|
|
6797
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
7741
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React62.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62.createElement(
|
|
6798
7742
|
"input",
|
|
6799
7743
|
{
|
|
6800
7744
|
value: localGreeting,
|
|
@@ -6805,8 +7749,8 @@ function SignatureEditor({ style, props }) {
|
|
|
6805
7749
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
6806
7750
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
6807
7751
|
}
|
|
6808
|
-
)) : greeting ? /* @__PURE__ */
|
|
6809
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
7752
|
+
)) : greeting ? /* @__PURE__ */ React62.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
7753
|
+
const textContent = isSelected ? /* @__PURE__ */ React62.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62.createElement(
|
|
6810
7754
|
"input",
|
|
6811
7755
|
{
|
|
6812
7756
|
value: localName,
|
|
@@ -6817,7 +7761,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6817
7761
|
placeholder: "Name",
|
|
6818
7762
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
6819
7763
|
}
|
|
6820
|
-
), /* @__PURE__ */
|
|
7764
|
+
), /* @__PURE__ */ React62.createElement(
|
|
6821
7765
|
"input",
|
|
6822
7766
|
{
|
|
6823
7767
|
value: localTitle,
|
|
@@ -6828,7 +7772,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6828
7772
|
placeholder: "Title",
|
|
6829
7773
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
6830
7774
|
}
|
|
6831
|
-
), /* @__PURE__ */
|
|
7775
|
+
), /* @__PURE__ */ React62.createElement(
|
|
6832
7776
|
"input",
|
|
6833
7777
|
{
|
|
6834
7778
|
value: localCompany,
|
|
@@ -6839,7 +7783,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6839
7783
|
placeholder: "Company",
|
|
6840
7784
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
6841
7785
|
}
|
|
6842
|
-
), /* @__PURE__ */
|
|
7786
|
+
), /* @__PURE__ */ React62.createElement(
|
|
6843
7787
|
"input",
|
|
6844
7788
|
{
|
|
6845
7789
|
value: localAddress,
|
|
@@ -6850,7 +7794,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6850
7794
|
placeholder: "Address",
|
|
6851
7795
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
6852
7796
|
}
|
|
6853
|
-
), /* @__PURE__ */
|
|
7797
|
+
), /* @__PURE__ */ React62.createElement(
|
|
6854
7798
|
"input",
|
|
6855
7799
|
{
|
|
6856
7800
|
value: localEmail,
|
|
@@ -6861,7 +7805,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6861
7805
|
placeholder: "Email",
|
|
6862
7806
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
6863
7807
|
}
|
|
6864
|
-
), /* @__PURE__ */
|
|
7808
|
+
), /* @__PURE__ */ React62.createElement(
|
|
6865
7809
|
"input",
|
|
6866
7810
|
{
|
|
6867
7811
|
value: localPhone,
|
|
@@ -6872,7 +7816,7 @@ function SignatureEditor({ style, props }) {
|
|
|
6872
7816
|
placeholder: "Phone",
|
|
6873
7817
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
6874
7818
|
}
|
|
6875
|
-
), /* @__PURE__ */
|
|
7819
|
+
), /* @__PURE__ */ React62.createElement(
|
|
6876
7820
|
"input",
|
|
6877
7821
|
{
|
|
6878
7822
|
value: localWebsite,
|
|
@@ -6883,11 +7827,11 @@ function SignatureEditor({ style, props }) {
|
|
|
6883
7827
|
placeholder: "Website",
|
|
6884
7828
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
6885
7829
|
}
|
|
6886
|
-
)) : /* @__PURE__ */
|
|
7830
|
+
)) : /* @__PURE__ */ React62.createElement("div", null, name && /* @__PURE__ */ React62.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React62.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React62.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React62.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, "Click to edit signature"));
|
|
6887
7831
|
if (layout === "vertical") {
|
|
6888
|
-
return /* @__PURE__ */
|
|
7832
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React62.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
6889
7833
|
}
|
|
6890
|
-
return /* @__PURE__ */
|
|
7834
|
+
return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React62.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", null, imageElement && /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
6891
7835
|
}
|
|
6892
7836
|
function getFontFamily10(fontFamily) {
|
|
6893
7837
|
switch (fontFamily) {
|
|
@@ -7031,7 +7975,7 @@ function TextEditor({ style, props }) {
|
|
|
7031
7975
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7032
7976
|
}, [localText, isSelected]);
|
|
7033
7977
|
if (isSelected) {
|
|
7034
|
-
return /* @__PURE__ */
|
|
7978
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
7035
7979
|
"textarea",
|
|
7036
7980
|
{
|
|
7037
7981
|
ref: textareaRef,
|
|
@@ -7049,10 +7993,10 @@ function TextEditor({ style, props }) {
|
|
|
7049
7993
|
rows: 1,
|
|
7050
7994
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7051
7995
|
}
|
|
7052
|
-
), /* @__PURE__ */
|
|
7996
|
+
), /* @__PURE__ */ React62.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7053
7997
|
}
|
|
7054
7998
|
if (isMarkdown) {
|
|
7055
|
-
return /* @__PURE__ */
|
|
7999
|
+
return /* @__PURE__ */ React62.createElement(
|
|
7056
8000
|
"div",
|
|
7057
8001
|
{
|
|
7058
8002
|
ref: displayRef,
|
|
@@ -7061,34 +8005,34 @@ function TextEditor({ style, props }) {
|
|
|
7061
8005
|
}
|
|
7062
8006
|
);
|
|
7063
8007
|
}
|
|
7064
|
-
return /* @__PURE__ */
|
|
8008
|
+
return /* @__PURE__ */ React62.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
7065
8009
|
}
|
|
7066
8010
|
|
|
7067
8011
|
// src/editor/core.tsx
|
|
7068
8012
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
7069
8013
|
Avatar: {
|
|
7070
8014
|
schema: AvatarPropsSchema,
|
|
7071
|
-
Component: (props) => /* @__PURE__ */
|
|
8015
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(avatar_default, __spreadValues({}, props)))
|
|
7072
8016
|
},
|
|
7073
8017
|
Button: {
|
|
7074
8018
|
schema: ButtonPropsSchema,
|
|
7075
|
-
Component: (props) => /* @__PURE__ */
|
|
8019
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
7076
8020
|
},
|
|
7077
8021
|
Container: {
|
|
7078
8022
|
schema: container_props_schema_default,
|
|
7079
|
-
Component: (props) => /* @__PURE__ */
|
|
8023
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
7080
8024
|
},
|
|
7081
8025
|
ColumnsContainer: {
|
|
7082
8026
|
schema: columns_container_props_schema_default2,
|
|
7083
|
-
Component: (props) => /* @__PURE__ */
|
|
8027
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
7084
8028
|
},
|
|
7085
8029
|
Heading: {
|
|
7086
8030
|
schema: HeadingPropsSchema,
|
|
7087
|
-
Component: (props) => /* @__PURE__ */
|
|
8031
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
7088
8032
|
},
|
|
7089
8033
|
Html: {
|
|
7090
8034
|
schema: HtmlPropsSchema,
|
|
7091
|
-
Component: (props) => /* @__PURE__ */
|
|
8035
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
7092
8036
|
},
|
|
7093
8037
|
Image: {
|
|
7094
8038
|
schema: ImagePropsSchema,
|
|
@@ -7100,28 +8044,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
7100
8044
|
linkHref: null
|
|
7101
8045
|
})
|
|
7102
8046
|
});
|
|
7103
|
-
return /* @__PURE__ */
|
|
8047
|
+
return /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(image_default, __spreadValues({}, props)));
|
|
7104
8048
|
}
|
|
7105
8049
|
},
|
|
7106
8050
|
Text: {
|
|
7107
8051
|
schema: TextPropsSchema,
|
|
7108
|
-
Component: (props) => /* @__PURE__ */
|
|
8052
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(TextEditor, __spreadValues({}, props)))
|
|
7109
8053
|
},
|
|
7110
8054
|
EmailLayout: {
|
|
7111
8055
|
schema: email_layout_props_schema_default,
|
|
7112
|
-
Component: (p) => /* @__PURE__ */
|
|
8056
|
+
Component: (p) => /* @__PURE__ */ React62.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
7113
8057
|
},
|
|
7114
8058
|
Spacer: {
|
|
7115
8059
|
schema: SpacerPropsSchema,
|
|
7116
|
-
Component: (props) => /* @__PURE__ */
|
|
8060
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(spacer_default, __spreadValues({}, props)))
|
|
7117
8061
|
},
|
|
7118
8062
|
Divider: {
|
|
7119
8063
|
schema: DividerPropsSchema,
|
|
7120
|
-
Component: (props) => /* @__PURE__ */
|
|
8064
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(divider_default, __spreadValues({}, props)))
|
|
7121
8065
|
},
|
|
7122
8066
|
Signature: {
|
|
7123
8067
|
schema: SignaturePropsSchema,
|
|
7124
|
-
Component: (props) => /* @__PURE__ */
|
|
8068
|
+
Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
7125
8069
|
}
|
|
7126
8070
|
});
|
|
7127
8071
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -7137,7 +8081,7 @@ function EditorBlock({ id }) {
|
|
|
7137
8081
|
if (!block) {
|
|
7138
8082
|
throw new Error("Could not find block");
|
|
7139
8083
|
}
|
|
7140
|
-
return /* @__PURE__ */
|
|
8084
|
+
return /* @__PURE__ */ React62.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React62.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
7141
8085
|
}
|
|
7142
8086
|
function ToggleInspectorPanelButton() {
|
|
7143
8087
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -7145,20 +8089,20 @@ function ToggleInspectorPanelButton() {
|
|
|
7145
8089
|
toggleInspectorDrawerOpen();
|
|
7146
8090
|
};
|
|
7147
8091
|
if (inspectorDrawerOpen) {
|
|
7148
|
-
return /* @__PURE__ */
|
|
8092
|
+
return /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React62.createElement(LastPageOutlined, { fontSize: "small" }));
|
|
7149
8093
|
}
|
|
7150
|
-
return /* @__PURE__ */
|
|
8094
|
+
return /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React62.createElement(AppRegistrationOutlined, { fontSize: "small" }));
|
|
7151
8095
|
}
|
|
7152
8096
|
function useIcon() {
|
|
7153
8097
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
7154
8098
|
if (samplesDrawerOpen) {
|
|
7155
|
-
return /* @__PURE__ */
|
|
8099
|
+
return /* @__PURE__ */ React62.createElement(FirstPageOutlined, { fontSize: "small" });
|
|
7156
8100
|
}
|
|
7157
|
-
return /* @__PURE__ */
|
|
8101
|
+
return /* @__PURE__ */ React62.createElement(MenuOutlined, { fontSize: "small" });
|
|
7158
8102
|
}
|
|
7159
8103
|
function ToggleSamplesPanelButton() {
|
|
7160
8104
|
const icon = useIcon();
|
|
7161
|
-
return /* @__PURE__ */
|
|
8105
|
+
return /* @__PURE__ */ React62.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
7162
8106
|
}
|
|
7163
8107
|
function formatHtml(html2, spaces = 2) {
|
|
7164
8108
|
try {
|
|
@@ -7220,7 +8164,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
7220
8164
|
if (code === null) {
|
|
7221
8165
|
return null;
|
|
7222
8166
|
}
|
|
7223
|
-
return /* @__PURE__ */
|
|
8167
|
+
return /* @__PURE__ */ React62.createElement(
|
|
7224
8168
|
"pre",
|
|
7225
8169
|
{
|
|
7226
8170
|
style: {
|
|
@@ -7246,17 +8190,17 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
7246
8190
|
function HtmlPanel() {
|
|
7247
8191
|
const document2 = useDocument();
|
|
7248
8192
|
const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
7249
|
-
return /* @__PURE__ */
|
|
8193
|
+
return /* @__PURE__ */ React62.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
7250
8194
|
}
|
|
7251
8195
|
function JsonPanel() {
|
|
7252
8196
|
const document2 = useDocument();
|
|
7253
8197
|
const code = useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
7254
|
-
return /* @__PURE__ */
|
|
8198
|
+
return /* @__PURE__ */ React62.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
7255
8199
|
}
|
|
7256
8200
|
function TextPanel() {
|
|
7257
8201
|
const document2 = useDocument();
|
|
7258
8202
|
const text = useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
7259
|
-
return /* @__PURE__ */
|
|
8203
|
+
return /* @__PURE__ */ React62.createElement(
|
|
7260
8204
|
"pre",
|
|
7261
8205
|
{
|
|
7262
8206
|
style: {
|
|
@@ -7292,185 +8236,184 @@ function MainTabsGroup() {
|
|
|
7292
8236
|
setSelectedMainTab("editor");
|
|
7293
8237
|
}
|
|
7294
8238
|
};
|
|
7295
|
-
return /* @__PURE__ */
|
|
8239
|
+
return /* @__PURE__ */ React62.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React62.createElement(
|
|
7296
8240
|
Tab,
|
|
7297
8241
|
{
|
|
7298
8242
|
value: "editor",
|
|
7299
|
-
label: /* @__PURE__ */
|
|
8243
|
+
label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React62.createElement(EditOutlined, { fontSize: "small" }))
|
|
7300
8244
|
}
|
|
7301
|
-
), /* @__PURE__ */
|
|
8245
|
+
), /* @__PURE__ */ React62.createElement(
|
|
7302
8246
|
Tab,
|
|
7303
8247
|
{
|
|
7304
8248
|
value: "preview",
|
|
7305
|
-
label: /* @__PURE__ */
|
|
8249
|
+
label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React62.createElement(PreviewOutlined, { fontSize: "small" }))
|
|
7306
8250
|
}
|
|
7307
|
-
), /* @__PURE__ */
|
|
8251
|
+
), /* @__PURE__ */ React62.createElement(
|
|
7308
8252
|
Tab,
|
|
7309
8253
|
{
|
|
7310
8254
|
value: "html",
|
|
7311
|
-
label: /* @__PURE__ */
|
|
8255
|
+
label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React62.createElement(CodeOutlined, { fontSize: "small" }))
|
|
7312
8256
|
}
|
|
7313
|
-
), /* @__PURE__ */
|
|
8257
|
+
), /* @__PURE__ */ React62.createElement(
|
|
7314
8258
|
Tab,
|
|
7315
8259
|
{
|
|
7316
8260
|
value: "text",
|
|
7317
|
-
label: /* @__PURE__ */
|
|
8261
|
+
label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React62.createElement(SubjectOutlined, { fontSize: "small" }))
|
|
7318
8262
|
}
|
|
7319
|
-
), /* @__PURE__ */
|
|
8263
|
+
), /* @__PURE__ */ React62.createElement(
|
|
7320
8264
|
Tab,
|
|
7321
8265
|
{
|
|
7322
8266
|
value: "json",
|
|
7323
|
-
label: /* @__PURE__ */
|
|
8267
|
+
label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React62.createElement(DataObjectOutlined, { fontSize: "small" }))
|
|
7324
8268
|
}
|
|
7325
8269
|
));
|
|
7326
8270
|
}
|
|
7327
|
-
function
|
|
7328
|
-
const {
|
|
8271
|
+
function SaveBar({ loadTemplates, saveAs }) {
|
|
8272
|
+
const {
|
|
8273
|
+
saveTemplate,
|
|
8274
|
+
currentTemplateId,
|
|
8275
|
+
currentTemplateName,
|
|
8276
|
+
currentTemplateKind,
|
|
8277
|
+
setCurrentTemplate,
|
|
8278
|
+
loadTemplate: ctxLoadTemplate
|
|
8279
|
+
} = useEmailEditor();
|
|
7329
8280
|
const { showMessage } = useSnackbar();
|
|
7330
|
-
const [saveDialogOpen, setSaveDialogOpen] = useState(false);
|
|
7331
8281
|
const document2 = useDocument();
|
|
8282
|
+
const [dialogMode, setDialogMode] = useState(null);
|
|
8283
|
+
const [nameError, setNameError] = useState(null);
|
|
8284
|
+
const hasOpenRow = Boolean(currentTemplateId);
|
|
7332
8285
|
const isSample = currentTemplateKind === "sample";
|
|
7333
|
-
const
|
|
8286
|
+
const primaryLabel = hasOpenRow ? "Save" : "Save as new\u2026";
|
|
8287
|
+
const handlePrimary = () => __async(null, null, function* () {
|
|
7334
8288
|
try {
|
|
7335
|
-
if (!
|
|
7336
|
-
|
|
8289
|
+
if (!hasOpenRow) {
|
|
8290
|
+
setNameError(null);
|
|
8291
|
+
setDialogMode("save-as");
|
|
7337
8292
|
return;
|
|
7338
8293
|
}
|
|
7339
8294
|
saveTemplate();
|
|
7340
|
-
showMessage("
|
|
7341
|
-
if (loadTemplates)
|
|
7342
|
-
|
|
7343
|
-
|
|
7344
|
-
|
|
7345
|
-
console.error("Error saving template:", error);
|
|
7346
|
-
showMessage("Error saving template");
|
|
8295
|
+
showMessage(isSample ? "Sample saved" : "Template saved");
|
|
8296
|
+
if (loadTemplates) yield loadTemplates();
|
|
8297
|
+
} catch (e) {
|
|
8298
|
+
console.error("Error saving:", e);
|
|
8299
|
+
showMessage("Error saving");
|
|
7347
8300
|
}
|
|
7348
8301
|
});
|
|
7349
|
-
const handleSaveAs = (
|
|
8302
|
+
const handleSaveAs = (name) => __async(null, null, function* () {
|
|
8303
|
+
if (!saveAs) return false;
|
|
7350
8304
|
try {
|
|
7351
|
-
|
|
7352
|
-
|
|
7353
|
-
|
|
7354
|
-
|
|
7355
|
-
|
|
7356
|
-
|
|
7357
|
-
|
|
7358
|
-
|
|
7359
|
-
|
|
7360
|
-
|
|
7361
|
-
|
|
7362
|
-
|
|
7363
|
-
} catch (error) {
|
|
7364
|
-
console.error("Error saving template:", error);
|
|
7365
|
-
showMessage("Error saving template");
|
|
8305
|
+
const starterContent = dialogMode === "new-blank" ? empty_email_message_default : document2;
|
|
8306
|
+
const { id, slug } = yield saveAs(name, buildSavePayload(starterContent));
|
|
8307
|
+
resetDocument(starterContent);
|
|
8308
|
+
setCurrentTemplate(id, slug, "template");
|
|
8309
|
+
ctxLoadTemplate(starterContent, id, slug, "template");
|
|
8310
|
+
if (loadTemplates) yield loadTemplates();
|
|
8311
|
+
showMessage(dialogMode === "new-blank" ? "New template created" : "Template saved");
|
|
8312
|
+
window.location.hash = `#template/${id}`;
|
|
8313
|
+
return true;
|
|
8314
|
+
} catch (e) {
|
|
8315
|
+
console.error("Error in saveAs:", e);
|
|
8316
|
+
showMessage("Error saving");
|
|
7366
8317
|
return false;
|
|
7367
8318
|
}
|
|
7368
8319
|
});
|
|
7369
|
-
return /* @__PURE__ */
|
|
7370
|
-
|
|
8320
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
8321
|
+
Box,
|
|
7371
8322
|
{
|
|
7372
|
-
onClick: handleSave,
|
|
7373
8323
|
sx: {
|
|
7374
|
-
|
|
7375
|
-
|
|
7376
|
-
|
|
7377
|
-
|
|
8324
|
+
position: "sticky",
|
|
8325
|
+
bottom: 0,
|
|
8326
|
+
display: "flex",
|
|
8327
|
+
justifyContent: "center",
|
|
8328
|
+
pointerEvents: "none",
|
|
8329
|
+
zIndex: 2,
|
|
8330
|
+
pb: 3
|
|
7378
8331
|
}
|
|
7379
8332
|
},
|
|
7380
|
-
/* @__PURE__ */
|
|
7381
|
-
|
|
7382
|
-
|
|
7383
|
-
|
|
7384
|
-
|
|
7385
|
-
|
|
7386
|
-
|
|
7387
|
-
|
|
7388
|
-
|
|
7389
|
-
|
|
7390
|
-
|
|
7391
|
-
|
|
7392
|
-
|
|
7393
|
-
const { showMessage } = useSnackbar();
|
|
7394
|
-
const [saveDialogOpen, setSaveDialogOpen] = useState(false);
|
|
7395
|
-
const [templates, setTemplates] = useState([]);
|
|
7396
|
-
const [nameError, setNameError] = useState(null);
|
|
7397
|
-
const fetchTemplates = () => __async(null, null, function* () {
|
|
7398
|
-
if (loadTemplates) {
|
|
7399
|
-
try {
|
|
7400
|
-
const result = yield loadTemplates();
|
|
7401
|
-
setTemplates(result);
|
|
7402
|
-
return result;
|
|
7403
|
-
} catch (error) {
|
|
7404
|
-
console.error("Error loading templates:", error);
|
|
7405
|
-
}
|
|
7406
|
-
}
|
|
7407
|
-
return [];
|
|
7408
|
-
});
|
|
7409
|
-
const handleNewTemplate = () => __async(null, null, function* () {
|
|
7410
|
-
yield fetchTemplates();
|
|
7411
|
-
setNameError(null);
|
|
7412
|
-
setSaveDialogOpen(true);
|
|
7413
|
-
});
|
|
7414
|
-
const validateTemplateName = (name) => {
|
|
7415
|
-
const nameExists = templates.some(
|
|
7416
|
-
(template) => template.slug.toLowerCase() === name.toLowerCase()
|
|
7417
|
-
);
|
|
7418
|
-
if (nameExists) {
|
|
7419
|
-
setNameError("A template with this name already exists");
|
|
7420
|
-
return false;
|
|
7421
|
-
}
|
|
7422
|
-
setNameError(null);
|
|
7423
|
-
return true;
|
|
7424
|
-
};
|
|
7425
|
-
const handleNameChange = () => {
|
|
7426
|
-
setNameError(null);
|
|
7427
|
-
};
|
|
7428
|
-
const handleCreateTemplate = (templateName) => __async(null, null, function* () {
|
|
7429
|
-
if (!validateTemplateName(templateName)) {
|
|
7430
|
-
return false;
|
|
7431
|
-
}
|
|
7432
|
-
try {
|
|
7433
|
-
if (saveAs) {
|
|
7434
|
-
const { id: templateId, slug } = yield saveAs(templateName, buildSavePayload(empty_email_message_default));
|
|
7435
|
-
resetDocument(empty_email_message_default);
|
|
7436
|
-
setCurrentTemplate(templateId, slug, "template");
|
|
7437
|
-
loadTemplate(empty_email_message_default, templateId, slug, "template");
|
|
7438
|
-
if (loadTemplates) {
|
|
7439
|
-
yield loadTemplates();
|
|
7440
|
-
}
|
|
7441
|
-
showMessage("New template created!");
|
|
7442
|
-
window.location.hash = `#template/${templateId}`;
|
|
7443
|
-
return true;
|
|
7444
|
-
}
|
|
7445
|
-
} catch (error) {
|
|
7446
|
-
console.error("Error creating template:", error);
|
|
7447
|
-
showMessage("Error creating template");
|
|
7448
|
-
}
|
|
7449
|
-
return false;
|
|
7450
|
-
});
|
|
7451
|
-
return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
|
|
7452
|
-
IconButton,
|
|
7453
|
-
{
|
|
7454
|
-
onClick: handleNewTemplate,
|
|
7455
|
-
sx: {
|
|
7456
|
-
backgroundColor: "grey.100",
|
|
7457
|
-
"&:hover": {
|
|
7458
|
-
backgroundColor: "grey.200"
|
|
8333
|
+
/* @__PURE__ */ React62.createElement(
|
|
8334
|
+
Box,
|
|
8335
|
+
{
|
|
8336
|
+
sx: {
|
|
8337
|
+
pointerEvents: "auto",
|
|
8338
|
+
display: "inline-flex",
|
|
8339
|
+
alignItems: "center",
|
|
8340
|
+
gap: 1.25,
|
|
8341
|
+
px: 2,
|
|
8342
|
+
py: 1.25,
|
|
8343
|
+
backgroundColor: "background.paper",
|
|
8344
|
+
borderRadius: 999,
|
|
8345
|
+
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
7459
8346
|
}
|
|
7460
|
-
}
|
|
7461
|
-
|
|
7462
|
-
|
|
7463
|
-
|
|
8347
|
+
},
|
|
8348
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React62.createElement(
|
|
8349
|
+
Box,
|
|
8350
|
+
{
|
|
8351
|
+
sx: {
|
|
8352
|
+
pl: 1,
|
|
8353
|
+
pr: 1,
|
|
8354
|
+
fontSize: 14,
|
|
8355
|
+
color: "text.secondary",
|
|
8356
|
+
maxWidth: 220,
|
|
8357
|
+
whiteSpace: "nowrap",
|
|
8358
|
+
overflow: "hidden",
|
|
8359
|
+
textOverflow: "ellipsis"
|
|
8360
|
+
},
|
|
8361
|
+
title: currentTemplateName
|
|
8362
|
+
},
|
|
8363
|
+
isSample ? "Sample \xB7 " : "",
|
|
8364
|
+
/* @__PURE__ */ React62.createElement(Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8365
|
+
),
|
|
8366
|
+
/* @__PURE__ */ React62.createElement(Tooltip, { title: hasOpenRow ? `Save changes${isSample ? " to this sample" : ""}` : "Save as a new template" }, /* @__PURE__ */ React62.createElement(
|
|
8367
|
+
Button$1,
|
|
8368
|
+
{
|
|
8369
|
+
variant: "contained",
|
|
8370
|
+
size: "large",
|
|
8371
|
+
startIcon: /* @__PURE__ */ React62.createElement(SaveOutlined, null),
|
|
8372
|
+
onClick: handlePrimary,
|
|
8373
|
+
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8374
|
+
},
|
|
8375
|
+
primaryLabel
|
|
8376
|
+
)),
|
|
8377
|
+
hasOpenRow && saveAs && /* @__PURE__ */ React62.createElement(Tooltip, { title: "Save as a new template" }, /* @__PURE__ */ React62.createElement(
|
|
8378
|
+
Button$1,
|
|
8379
|
+
{
|
|
8380
|
+
variant: "outlined",
|
|
8381
|
+
size: "large",
|
|
8382
|
+
startIcon: /* @__PURE__ */ React62.createElement(SaveAsOutlined, null),
|
|
8383
|
+
onClick: () => {
|
|
8384
|
+
setNameError(null);
|
|
8385
|
+
setDialogMode("save-as");
|
|
8386
|
+
},
|
|
8387
|
+
sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14 }
|
|
8388
|
+
},
|
|
8389
|
+
"Save as\u2026"
|
|
8390
|
+
)),
|
|
8391
|
+
saveAs && /* @__PURE__ */ React62.createElement(Tooltip, { title: "Start a fresh template" }, /* @__PURE__ */ React62.createElement(
|
|
8392
|
+
Button$1,
|
|
8393
|
+
{
|
|
8394
|
+
variant: "text",
|
|
8395
|
+
size: "large",
|
|
8396
|
+
startIcon: /* @__PURE__ */ React62.createElement(AddOutlined, null),
|
|
8397
|
+
onClick: () => {
|
|
8398
|
+
setNameError(null);
|
|
8399
|
+
setDialogMode("new-blank");
|
|
8400
|
+
},
|
|
8401
|
+
sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14, color: "text.secondary" }
|
|
8402
|
+
},
|
|
8403
|
+
"New"
|
|
8404
|
+
))
|
|
8405
|
+
)
|
|
8406
|
+
), /* @__PURE__ */ React62.createElement(
|
|
7464
8407
|
SaveTemplateDialog,
|
|
7465
8408
|
{
|
|
7466
|
-
open:
|
|
8409
|
+
open: dialogMode !== null,
|
|
7467
8410
|
onClose: () => {
|
|
7468
|
-
|
|
8411
|
+
setDialogMode(null);
|
|
7469
8412
|
setNameError(null);
|
|
7470
8413
|
},
|
|
7471
|
-
onSave:
|
|
7472
|
-
onNameChange:
|
|
7473
|
-
defaultName: "New Template",
|
|
8414
|
+
onSave: handleSaveAs,
|
|
8415
|
+
onNameChange: () => setNameError(null),
|
|
8416
|
+
defaultName: dialogMode === "new-blank" ? "New Template" : currentTemplateName ? `${currentTemplateName} (Copy)` : "New Template",
|
|
7474
8417
|
error: nameError
|
|
7475
8418
|
}
|
|
7476
8419
|
));
|
|
@@ -7498,7 +8441,7 @@ function SubjectInput() {
|
|
|
7498
8441
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
7499
8442
|
});
|
|
7500
8443
|
};
|
|
7501
|
-
return /* @__PURE__ */
|
|
8444
|
+
return /* @__PURE__ */ React62.createElement(
|
|
7502
8445
|
Box,
|
|
7503
8446
|
{
|
|
7504
8447
|
sx: {
|
|
@@ -7515,8 +8458,8 @@ function SubjectInput() {
|
|
|
7515
8458
|
gap: 1.5
|
|
7516
8459
|
}
|
|
7517
8460
|
},
|
|
7518
|
-
/* @__PURE__ */
|
|
7519
|
-
/* @__PURE__ */
|
|
8461
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8462
|
+
/* @__PURE__ */ React62.createElement(
|
|
7520
8463
|
InputBase,
|
|
7521
8464
|
{
|
|
7522
8465
|
fullWidth: true,
|
|
@@ -7542,7 +8485,7 @@ function SubjectPreview() {
|
|
|
7542
8485
|
if (!subject) return null;
|
|
7543
8486
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
7544
8487
|
const rendered = substituteSampleValues(subject, samples);
|
|
7545
|
-
return /* @__PURE__ */
|
|
8488
|
+
return /* @__PURE__ */ React62.createElement(
|
|
7546
8489
|
Box,
|
|
7547
8490
|
{
|
|
7548
8491
|
sx: {
|
|
@@ -7559,8 +8502,8 @@ function SubjectPreview() {
|
|
|
7559
8502
|
gap: 1.5
|
|
7560
8503
|
}
|
|
7561
8504
|
},
|
|
7562
|
-
/* @__PURE__ */
|
|
7563
|
-
/* @__PURE__ */
|
|
8505
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
8506
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { fontSize: 14 } }, rendered)
|
|
7564
8507
|
);
|
|
7565
8508
|
}
|
|
7566
8509
|
function generateId3() {
|
|
@@ -7633,7 +8576,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
7633
8576
|
window.addEventListener("paste", handlePaste);
|
|
7634
8577
|
return () => window.removeEventListener("paste", handlePaste);
|
|
7635
8578
|
}, [active, uploadImage]);
|
|
7636
|
-
if (!active) return /* @__PURE__ */
|
|
8579
|
+
if (!active) return /* @__PURE__ */ React62.createElement(React62.Fragment, null, children);
|
|
7637
8580
|
const onDragEnter = (e) => {
|
|
7638
8581
|
var _a, _b;
|
|
7639
8582
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -7666,7 +8609,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
7666
8609
|
setUploading(false);
|
|
7667
8610
|
}
|
|
7668
8611
|
});
|
|
7669
|
-
return /* @__PURE__ */
|
|
8612
|
+
return /* @__PURE__ */ React62.createElement(
|
|
7670
8613
|
Box,
|
|
7671
8614
|
{
|
|
7672
8615
|
ref: wrapperRef,
|
|
@@ -7677,7 +8620,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
7677
8620
|
sx: { position: "relative" }
|
|
7678
8621
|
},
|
|
7679
8622
|
children,
|
|
7680
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
8623
|
+
(dragging || uploading) && /* @__PURE__ */ React62.createElement(
|
|
7681
8624
|
Box,
|
|
7682
8625
|
{
|
|
7683
8626
|
sx: {
|
|
@@ -7696,17 +8639,20 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
7696
8639
|
zIndex: 10
|
|
7697
8640
|
}
|
|
7698
8641
|
},
|
|
7699
|
-
/* @__PURE__ */
|
|
8642
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React62.createElement(CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
|
|
7700
8643
|
)
|
|
7701
8644
|
);
|
|
7702
8645
|
}
|
|
7703
8646
|
|
|
7704
8647
|
// src/app/email-canvas/index.tsx
|
|
8648
|
+
var WORKSPACE_SOLID = "#e7e8ec";
|
|
8649
|
+
var WORKSPACE_CHECKERBOARD = "repeating-conic-gradient(#eceef2 0% 25%, #dfe1e6 0% 50%) 50% / 24px 24px";
|
|
7705
8650
|
function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
|
|
7706
8651
|
const document2 = useDocument();
|
|
7707
8652
|
const selectedMainTab = useSelectedMainTab();
|
|
7708
8653
|
const selectedScreenSize = useSelectedScreenSize();
|
|
7709
8654
|
const persistenceEnabled = usePersistenceEnabled();
|
|
8655
|
+
const workspaceBackground = useWorkspaceBackground();
|
|
7710
8656
|
let mainBoxSx = {
|
|
7711
8657
|
height: "100%"
|
|
7712
8658
|
};
|
|
@@ -7733,7 +8679,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
7733
8679
|
var _a;
|
|
7734
8680
|
switch (selectedMainTab) {
|
|
7735
8681
|
case "editor":
|
|
7736
|
-
return /* @__PURE__ */
|
|
8682
|
+
return /* @__PURE__ */ React62.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React62.createElement(EditorBlock, { id: "root" }));
|
|
7737
8683
|
case "preview": {
|
|
7738
8684
|
const rootBlock = document2.root;
|
|
7739
8685
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -7741,18 +8687,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
7741
8687
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
7742
8688
|
);
|
|
7743
8689
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
7744
|
-
return /* @__PURE__ */
|
|
8690
|
+
return /* @__PURE__ */ React62.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React62.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
7745
8691
|
}
|
|
7746
8692
|
case "html":
|
|
7747
|
-
return /* @__PURE__ */
|
|
8693
|
+
return /* @__PURE__ */ React62.createElement(HtmlPanel, null);
|
|
7748
8694
|
case "text":
|
|
7749
|
-
return /* @__PURE__ */
|
|
8695
|
+
return /* @__PURE__ */ React62.createElement(TextPanel, null);
|
|
7750
8696
|
case "json":
|
|
7751
|
-
return /* @__PURE__ */
|
|
8697
|
+
return /* @__PURE__ */ React62.createElement(JsonPanel, null);
|
|
7752
8698
|
}
|
|
7753
8699
|
};
|
|
7754
8700
|
const showSaveButtons = persistenceEnabled;
|
|
7755
|
-
return /* @__PURE__ */
|
|
8701
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
|
|
7756
8702
|
Stack,
|
|
7757
8703
|
{
|
|
7758
8704
|
sx: {
|
|
@@ -7769,13 +8715,28 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
7769
8715
|
justifyContent: "space-between",
|
|
7770
8716
|
alignItems: "center"
|
|
7771
8717
|
},
|
|
7772
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
7773
|
-
/* @__PURE__ */
|
|
7774
|
-
/* @__PURE__ */
|
|
7775
|
-
), selectedMainTab === "editor" && /* @__PURE__ */
|
|
7776
|
-
|
|
7777
|
-
|
|
7778
|
-
|
|
8718
|
+
samplesDrawerEnabled && /* @__PURE__ */ React62.createElement(ToggleSamplesPanelButton, null),
|
|
8719
|
+
/* @__PURE__ */ React62.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62.createElement(MainTabsGroup, null)), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React62.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React62.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React62.createElement(PhoneIphoneOutlined, { fontSize: "small" })))))),
|
|
8720
|
+
/* @__PURE__ */ React62.createElement(ToggleInspectorPanelButton, null)
|
|
8721
|
+
), selectedMainTab === "editor" && /* @__PURE__ */ React62.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React62.createElement(SubjectPreview, null), /* @__PURE__ */ React62.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React62.createElement(
|
|
8722
|
+
Box,
|
|
8723
|
+
{
|
|
8724
|
+
sx: {
|
|
8725
|
+
flexGrow: 1,
|
|
8726
|
+
display: "flex",
|
|
8727
|
+
flexDirection: "column",
|
|
8728
|
+
paddingBottom: "16px",
|
|
8729
|
+
minWidth: 370,
|
|
8730
|
+
// Fills to the bottom of the viewport in editor mode so the
|
|
8731
|
+
// workspace gray doesn't end midway under a short email.
|
|
8732
|
+
// 49px toolbar + 49px subject bar = 98px fixed chrome above.
|
|
8733
|
+
minHeight: selectedMainTab === "editor" ? "calc(100vh - 98px)" : void 0,
|
|
8734
|
+
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
8735
|
+
}
|
|
8736
|
+
},
|
|
8737
|
+
/* @__PURE__ */ React62.createElement(Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
|
|
8738
|
+
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React62.createElement(SaveBar, { loadTemplates, saveAs })
|
|
8739
|
+
)));
|
|
7779
8740
|
}
|
|
7780
8741
|
|
|
7781
8742
|
// src/app/index.tsx
|
|
@@ -7856,7 +8817,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
7856
8817
|
return getDocument();
|
|
7857
8818
|
}
|
|
7858
8819
|
}));
|
|
7859
|
-
return /* @__PURE__ */
|
|
8820
|
+
return /* @__PURE__ */ React62.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React62.createElement(
|
|
7860
8821
|
InspectorDrawer,
|
|
7861
8822
|
{
|
|
7862
8823
|
enterDuration: drawerEnterDuration,
|
|
@@ -7864,7 +8825,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
7864
8825
|
deleteTemplate,
|
|
7865
8826
|
copyTemplate
|
|
7866
8827
|
}
|
|
7867
|
-
), /* @__PURE__ */
|
|
8828
|
+
), /* @__PURE__ */ React62.createElement(
|
|
7868
8829
|
SamplesDrawer,
|
|
7869
8830
|
{
|
|
7870
8831
|
enterDuration: drawerEnterDuration,
|
|
@@ -7880,7 +8841,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
7880
8841
|
setTemplateKind,
|
|
7881
8842
|
saveAs
|
|
7882
8843
|
}
|
|
7883
|
-
), /* @__PURE__ */
|
|
8844
|
+
), /* @__PURE__ */ React62.createElement(
|
|
7884
8845
|
Stack,
|
|
7885
8846
|
{
|
|
7886
8847
|
sx: {
|
|
@@ -7889,7 +8850,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
|
|
|
7889
8850
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
7890
8851
|
}
|
|
7891
8852
|
},
|
|
7892
|
-
/* @__PURE__ */
|
|
8853
|
+
/* @__PURE__ */ React62.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
7893
8854
|
));
|
|
7894
8855
|
});
|
|
7895
8856
|
var EmailEditor = forwardRef((props, ref) => {
|
|
@@ -7933,7 +8894,7 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
7933
8894
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
7934
8895
|
[uploadImage, loadImages, deleteImage]
|
|
7935
8896
|
);
|
|
7936
|
-
return /* @__PURE__ */
|
|
8897
|
+
return /* @__PURE__ */ React62.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React62.createElement(CssBaseline, null), /* @__PURE__ */ React62.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React62.createElement(SnackbarProvider, null, /* @__PURE__ */ React62.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React62.createElement(
|
|
7937
8898
|
EmailEditorProvider,
|
|
7938
8899
|
{
|
|
7939
8900
|
initialTemplate: resolvedTemplate,
|
|
@@ -7942,7 +8903,7 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
7942
8903
|
onSave,
|
|
7943
8904
|
onChange
|
|
7944
8905
|
},
|
|
7945
|
-
/* @__PURE__ */
|
|
8906
|
+
/* @__PURE__ */ React62.createElement(
|
|
7946
8907
|
EmailEditorInternal,
|
|
7947
8908
|
{
|
|
7948
8909
|
ref,
|
|
@@ -7966,6 +8927,6 @@ var EmailEditor = forwardRef((props, ref) => {
|
|
|
7966
8927
|
EmailEditor.displayName = "EmailEditor";
|
|
7967
8928
|
EmailEditorInternal.displayName = "EmailEditorInternal";
|
|
7968
8929
|
|
|
7969
|
-
export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
|
|
8930
|
+
export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, editorHandlebars, evaluateHandlebars, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
|
|
7970
8931
|
//# sourceMappingURL=index.js.map
|
|
7971
8932
|
//# sourceMappingURL=index.js.map
|