@kontakto/email-template-editor 1.5.1 → 1.6.0

package/dist/index.cjs

@@ -1126,6 +1126,7 @@ var FONT_FAMILY_SCHEMA6 = zod.z.enum([
 ]).nullable().optional();
 var EmailLayoutPropsSchema = zod.z.object({
   backdropColor: COLOR_SCHEMA9,
+  backdropDisabled: zod.z.boolean().optional().nullable(),
   borderColor: COLOR_SCHEMA9,
   borderRadius: zod.z.number().optional().nullable(),
   canvasColor: COLOR_SCHEMA9,
@@ -1165,22 +1166,27 @@ function getBorder2({ borderColor }) {
 function EmailLayoutReader(props) {
   var _a, _b, _c, _d, _e;
   const childrenIds = (_a = props.childrenIds) != null ? _a : [];
+  const baseStyle = {
+    color: (_b = props.textColor) != null ? _b : "#262626",
+    fontFamily: getFontFamily6(props.fontFamily),
+    fontSize: "16px",
+    fontWeight: "400",
+    letterSpacing: "0.15008px",
+    lineHeight: "1.5",
+    margin: "0"
+  };
+  if (props.backdropDisabled) {
+    return /* @__PURE__ */ React72__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
+  }
   return /* @__PURE__ */ React72__default.default.createElement(
     "div",
     {
-      style: {
-        backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
-        color: (_c = props.textColor) != null ? _c : "#262626",
-        fontFamily: getFontFamily6(props.fontFamily),
-        fontSize: "16px",
-        fontWeight: "400",
-        letterSpacing: "0.15008px",
-        lineHeight: "1.5",
-        margin: "0",
+      style: __spreadProps(__spreadValues({}, baseStyle), {
+        backgroundColor: (_c = props.backdropColor) != null ? _c : "#F5F5F5",
         padding: "32px 0",
         minHeight: "100%",
         width: "100%"
-      }
+      })
     },
     /* @__PURE__ */ React72__default.default.createElement(
       "table",
@@ -1192,6 +1198,7 @@ function EmailLayoutReader(props) {
           maxWidth: "600px",
           backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF",
           borderRadius: (_e = props.borderRadius) != null ? _e : void 0,
+          overflow: props.borderRadius ? "hidden" : void 0,
           border: getBorder2(props)
         },
         role: "presentation",
@@ -2958,6 +2965,7 @@ var FONT_FAMILY_SCHEMA7 = zod.z.enum([
 ]).nullable().optional();
 var EmailLayoutPropsSchema2 = zod.z.object({
   backdropColor: COLOR_SCHEMA10,
+  backdropDisabled: zod.z.boolean().optional().nullable(),
   borderColor: COLOR_SCHEMA10,
   borderRadius: zod.z.number().optional().nullable(),
   canvasColor: COLOR_SCHEMA10,
@@ -2966,10 +2974,32 @@ var EmailLayoutPropsSchema2 = zod.z.object({
   childrenIds: zod.z.array(zod.z.string()).optional().nullable()
 });
 var email_layout_props_schema_default = EmailLayoutPropsSchema2;
+function BooleanInput({ label, defaultValue, onChange }) {
+  const [value, setValue] = React72.useState(defaultValue);
+  React72.useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+  return /* @__PURE__ */ React72__default.default.createElement(
+    material.FormControlLabel,
+    {
+      label,
+      control: /* @__PURE__ */ React72__default.default.createElement(
+        material.Switch,
+        {
+          checked: value,
+          onChange: (_, checked) => {
+            setValue(checked);
+            onChange(checked);
+          }
+        }
+      )
+    }
+  );
+}
 
 // src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
 function EmailLayoutSidebarFields({ data, setData }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const [, setErrors] = React72.useState(null);
   const updateData = (d) => {
     const res = email_layout_props_schema_default.safeParse(d);
@@ -2980,25 +3010,33 @@ function EmailLayoutSidebarFields({ data, setData }) {
       setErrors(res.error);
     }
   };
+  const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
   return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React72__default.default.createElement(
+    BooleanInput,
+    {
+      label: "Disable backdrop",
+      defaultValue: backdropDisabled,
+      onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
+    }
+  ), !backdropDisabled && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
     ColorInput2,
     {
       label: "Backdrop color",
-      defaultValue: (_a = data.backdropColor) != null ? _a : "#F5F5F5",
+      defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
       onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
     }
   ), /* @__PURE__ */ React72__default.default.createElement(
     ColorInput2,
     {
       label: "Canvas color",
-      defaultValue: (_b = data.canvasColor) != null ? _b : "#FFFFFF",
+      defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
       onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
     }
   ), /* @__PURE__ */ React72__default.default.createElement(
     NullableColorInput,
     {
       label: "Canvas border color",
-      defaultValue: (_c = data.borderColor) != null ? _c : null,
+      defaultValue: (_d = data.borderColor) != null ? _d : null,
       onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
     }
   ), /* @__PURE__ */ React72__default.default.createElement(
@@ -3011,10 +3049,10 @@ function EmailLayoutSidebarFields({ data, setData }) {
       min: 0,
       max: 48,
       label: "Canvas border radius",
-      defaultValue: (_d = data.borderRadius) != null ? _d : 0,
+      defaultValue: (_e = data.borderRadius) != null ? _e : 0,
       onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  )), /* @__PURE__ */ React72__default.default.createElement(
     NullableFontFamily,
     {
       label: "Font family",
@@ -3025,7 +3063,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
     ColorInput2,
     {
       label: "Text color",
-      defaultValue: (_e = data.textColor) != null ? _e : "#262626",
+      defaultValue: (_f = data.textColor) != null ? _f : "#262626",
       onChange: (textColor) => updateData(__spreadProps(__spreadValues({}, data), { textColor }))
     }
   ));
@@ -3351,30 +3389,6 @@ function SpacerSidebarPanel({ data, setData }) {
     }
   ));
 }
-function BooleanInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(defaultValue);
-  React72.useEffect(() => {
-    setValue(defaultValue);
-  }, [defaultValue]);
-  return /* @__PURE__ */ React72__default.default.createElement(
-    material.FormControlLabel,
-    {
-      label,
-      control: /* @__PURE__ */ React72__default.default.createElement(
-        material.Switch,
-        {
-          checked: value,
-          onChange: (_, checked) => {
-            setValue(checked);
-            onChange(checked);
-          }
-        }
-      )
-    }
-  );
-}
-
-// src/app/inspector-drawer/configuration-panel/input-panels/text-sidebar-panel.tsx
 function TextSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d;
   const [, setErrors] = React72.useState(null);
@@ -3861,7 +3875,7 @@ var BUTTONS = [
     block: () => ({
       type: "Text",
       data: {
-        props: { text: "My new text block" },
+        props: { text: "My new text block", markdown: true },
         style: {
           padding: { top: 16, bottom: 16, left: 24, right: 24 },
           fontWeight: "normal"
@@ -3877,7 +3891,7 @@ var BUTTONS = [
       data: {
         props: {
           text: "Button",
-          url: "https://www.usewaypoint.com"
+          url: "https://example.com"
         },
         style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
       }
@@ -3890,7 +3904,7 @@ var BUTTONS = [
       type: "Image",
       data: {
         props: {
-          url: "https://assets.usewaypoint.com/sample-image.jpg",
+          url: "https://placehold.co/600x400/EEE/999?text=Sample+Image",
           alt: "Sample product",
           contentAlignment: "middle",
           linkHref: null
@@ -4405,25 +4419,62 @@ function EmailLayoutEditor(props) {
       window.removeEventListener("paste", handlePaste);
     };
   }, [handleDelete, handleCopy, handlePaste]);
+  const baseStyle = {
+    color: (_b = props.textColor) != null ? _b : "#262626",
+    fontFamily: getFontFamily7(props.fontFamily),
+    fontSize: "16px",
+    fontWeight: "400",
+    letterSpacing: "0.15008px",
+    lineHeight: "1.5",
+    margin: "0"
+  };
+  const editorChildren = /* @__PURE__ */ React72__default.default.createElement(
+    EditorChildrenIds,
+    {
+      childrenIds,
+      onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
+        setDocument({
+          [blockId]: block,
+          [currentBlockId]: {
+            type: "EmailLayout",
+            data: __spreadProps(__spreadValues({}, document2[currentBlockId].data), {
+              childrenIds: childrenIds2
+            })
+          }
+        });
+        setSelectedBlockId(blockId);
+      }
+    }
+  );
+  if (props.backdropDisabled) {
+    return /* @__PURE__ */ React72__default.default.createElement(
+      "div",
+      {
+        onClick: () => {
+          setSelectedBlockId(null);
+        },
+        style: __spreadProps(__spreadValues({}, baseStyle), {
+          backgroundColor: "#F5F5F5",
+          padding: "32px",
+          width: "100%",
+          minHeight: "100%"
+        })
+      },
+      /* @__PURE__ */ React72__default.default.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
+    );
+  }
   return /* @__PURE__ */ React72__default.default.createElement(
     "div",
     {
       onClick: () => {
         setSelectedBlockId(null);
       },
-      style: {
-        backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
-        color: (_c = props.textColor) != null ? _c : "#262626",
-        fontFamily: getFontFamily7(props.fontFamily),
-        fontSize: "16px",
-        fontWeight: "400",
-        letterSpacing: "0.15008px",
-        lineHeight: "1.5",
-        margin: "0",
+      style: __spreadProps(__spreadValues({}, baseStyle), {
+        backgroundColor: (_c = props.backdropColor) != null ? _c : "#F5F5F5",
         padding: "32px 0",
         width: "100%",
         minHeight: "100%"
-      }
+      })
     },
     /* @__PURE__ */ React72__default.default.createElement(
       "table",
@@ -4435,6 +4486,7 @@ function EmailLayoutEditor(props) {
           maxWidth: "600px",
           backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF",
           borderRadius: (_e = props.borderRadius) != null ? _e : void 0,
+          overflow: props.borderRadius ? "hidden" : void 0,
           border: (() => {
             const v = props.borderColor;
             if (!v) {
@@ -4448,24 +4500,7 @@ function EmailLayoutEditor(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("td", null, /* @__PURE__ */ React72__default.default.createElement(
-        EditorChildrenIds,
-        {
-          childrenIds,
-          onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
-            setDocument({
-              [blockId]: block,
-              [currentBlockId]: {
-                type: "EmailLayout",
-                data: __spreadProps(__spreadValues({}, document2[currentBlockId].data), {
-                  childrenIds: childrenIds2
-                })
-              }
-            });
-            setSelectedBlockId(blockId);
-          }
-        }
-      ))))
+      /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("td", null, editorChildren)))
     )
   );
 }
@@ -5338,7 +5373,7 @@ function TextEditor({ style, props }) {
       element.style.height = `${element.scrollHeight}px`;
     }
   };
-  if (isSelected && !isMarkdown) {
+  if (isSelected) {
     return /* @__PURE__ */ React72__default.default.createElement(
       "textarea",
       {